<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Hugo 0.82.0" />


<title>R交互表格-reactable - 宇飞的世界</title>
<meta property="og:title" content="R交互表格-reactable - 宇飞的世界">


  <link href='/favicon.ico' rel='icon' type='image/x-icon'/>



  








<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet' type='text/css' />



<link rel="stylesheet" href="/css/fonts.css" media="all">
<link rel="stylesheet" href="/css/main.css" media="all">



  </head>
  <body>
    <div class="wrapper">
      <header class="header">
        <nav class="nav">
  <a href="/" class="nav-logo">
    <img src="/images/logo.png"
         width="50"
         height="50"
         alt="Logo">
  </a>

  <ul class="nav-links">
    
    <li><a href="/about/">About</a></li>
    
    <li><a href="/categories/">Categories</a></li>
    
    <li><a href="/tags/">Tags</a></li>
    
    <li><a href="http://www.zhongyufei.com/Rbook/_book">R study</a></li>
    
  </ul>
</nav>

      </header>


<main class="content" role="main">

  <article class="article">
    
    <span class="article-duration">17 min read</span>
    

    <h1 class="article-title">R交互表格-reactable</h1>

    
    <span class="article-date">2020-10-24</span>
    

    <div class="article-content">
      
<script src="/2020/10/24/reactable-study/index_files/accessible-code-block/empty-anchor.js"></script>
<script src="/2020/10/24/reactable-study/index_files/core-js/shim.min.js"></script>
<script src="/2020/10/24/reactable-study/index_files/react/react.min.js"></script>
<script src="/2020/10/24/reactable-study/index_files/react/react-dom.min.js"></script>
<script src="/2020/10/24/reactable-study/index_files/reactwidget/react-tools.js"></script>
<script src="/2020/10/24/reactable-study/index_files/htmlwidgets/htmlwidgets.js"></script>
<script src="/2020/10/24/reactable-study/index_files/reactable-binding/reactable.js"></script>
<script src="/2020/10/24/reactable-study/index_files/jquery/jquery.min.js"></script>
<link href="/2020/10/24/reactable-study/index_files/jquery-sparkline/jquery.sparkline.css" rel="stylesheet" />
<script src="/2020/10/24/reactable-study/index_files/jquery-sparkline/jquery.sparkline.js"></script>
<script src="/2020/10/24/reactable-study/index_files/sparkline-binding/sparkline.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/2020/10/24/reactable-study/index_files/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="/2020/10/24/reactable-study/index_files/bootstrap/js/bootstrap.min.js"></script>
<link href="/2020/10/24/reactable-study/index_files/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="/2020/10/24/reactable-study/index_files/crosstalk/js/crosstalk.min.js"></script>
<link href="/2020/10/24/reactable-study/index_files/ionrangeslider/css/ion.rangeSlider.css" rel="stylesheet" />
<link href="/2020/10/24/reactable-study/index_files/ionrangeslider/css/ion.rangeSlider.skinShiny.css" rel="stylesheet" />
<script src="/2020/10/24/reactable-study/index_files/ionrangeslider/js/ion.rangeSlider.min.js"></script>
<script src="/2020/10/24/reactable-study/index_files/strftime/strftime-min.js"></script>
<link href="/2020/10/24/reactable-study/index_files/selectize/css/selectize.bootstrap3.css" rel="stylesheet" />
<script src="/2020/10/24/reactable-study/index_files/selectize/js/selectize.min.js"></script>
<style type="text/css">
code.sourceCode > span { display: inline-block; line-height: 1.25; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {  background-color: #f8f8f8; }
@media screen {
code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ef2929; } /* Alert */
code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #c4a000; } /* Attribute */
code span.bn { color: #0000cf; } /* BaseN */
code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4e9a06; } /* Char */
code span.cn { color: #000000; } /* Constant */
code span.co { color: #8f5902; font-style: italic; } /* Comment */
code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
code span.dt { color: #204a87; } /* DataType */
code span.dv { color: #0000cf; } /* DecVal */
code span.er { color: #a40000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #0000cf; } /* Float */
code span.fu { color: #000000; } /* Function */
code span.im { } /* Import */
code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
code span.ot { color: #8f5902; } /* Other */
code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
code span.sc { color: #000000; } /* SpecialChar */
code span.ss { color: #4e9a06; } /* SpecialString */
code span.st { color: #4e9a06; } /* String */
code span.va { color: #000000; } /* Variable */
code span.vs { color: #4e9a06; } /* VerbatimString */
code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */
</style>

<div id="TOC">
<ul>
<li><a href="#介绍">介绍</a></li>
<li><a href="#安装">安装</a></li>
<li><a href="#用法">用法</a></li>
<li><a href="#示例">示例</a><ul>
<li><a href="#基础用法">基础用法</a></li>
<li><a href="#定义列">定义列</a></li>
<li><a href="#排序">排序</a></li>
<li><a href="#筛选">筛选</a></li>
<li><a href="#查找">查找</a></li>
<li><a href="#分页">分页</a></li>
<li><a href="#分组聚合">分组聚合</a></li>
<li><a href="#列样式">列样式</a></li>
<li><a href="#自定义渲染">自定义渲染</a></li>
<li><a href="#嵌套表格">嵌套表格</a></li>
<li><a href="#条件样式">条件样式</a></li>
<li><a href="#主题">主题</a></li>
<li><a href="#列分组">列分组</a></li>
<li><a href="#列大小调整">列大小调整</a></li>
<li><a href="#跨小部件交互">跨小部件交互</a></li>
</ul></li>
</ul>
</div>

<div id="介绍" class="section level2">
<h2>介绍</h2>
<p>本文主要是翻译部分官方用法介绍,从而达到了解学习<code>reactable</code>包的目的。可用该包制作R的交互式数据表,在<code>Rmarkdown</code>或者<code>shiny</code>中都可使用,可自定义主题,可自定义CSS,自定义<code>JS</code>。</p>
<p>想直接查看原网址，请点击<a href="https://github.com/glin/reactable">官方Github地址</a>。</p>
</div>
<div id="安装" class="section level2">
<h2>安装</h2>
<pre eval="FALSE"><code>install.packages(&quot;reactable&quot;)
devtools::install_github(&quot;glin/reactable&quot;)</code></pre>
</div>
<div id="用法" class="section level2">
<h2>用法</h2>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1"></a><span class="kw">library</span>(reactable)</span>
<span id="cb2-2"><a href="#cb2-2"></a></span>
<span id="cb2-3"><a href="#cb2-3"></a><span class="kw">reactable</span>(iris)</span></code></pre></div>
<div id="htmlwidget-1" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-1">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"06335fb869e56cffc43ca66fd95baaec","key":"06335fb869e56cffc43ca66fd95baaec"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>可以在<code>R markdown</code>文档中使用</p>
<p>也可以在<code>Shiny</code> app中使用:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb3-2"><a href="#cb3-2"></a><span class="kw">library</span>(reactable)</span>
<span id="cb3-3"><a href="#cb3-3"></a></span>
<span id="cb3-4"><a href="#cb3-4"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb3-5"><a href="#cb3-5"></a>  <span class="kw">reactableOutput</span>(<span class="st">&quot;table&quot;</span>)</span>
<span id="cb3-6"><a href="#cb3-6"></a>)</span>
<span id="cb3-7"><a href="#cb3-7"></a></span>
<span id="cb3-8"><a href="#cb3-8"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output) {</span>
<span id="cb3-9"><a href="#cb3-9"></a>  output<span class="op">$</span>table &lt;-<span class="st"> </span><span class="kw">renderReactable</span>({</span>
<span id="cb3-10"><a href="#cb3-10"></a>    <span class="kw">reactable</span>(iris)</span>
<span id="cb3-11"><a href="#cb3-11"></a>  })</span>
<span id="cb3-12"><a href="#cb3-12"></a>}</span>
<span id="cb3-13"><a href="#cb3-13"></a></span>
<span id="cb3-14"><a href="#cb3-14"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
</div>
<div id="示例" class="section level2">
<h2>示例</h2>
<div id="基础用法" class="section level3">
<h3>基础用法</h3>
<p>用<code>reactable()</code>创建表格,该表格默认为可排序和分页:</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb4-1"><a href="#cb4-1"></a><span class="kw">library</span>(reactable)</span>
<span id="cb4-2"><a href="#cb4-2"></a></span>
<span id="cb4-3"><a href="#cb4-3"></a><span class="kw">reactable</span>(iris)</span></code></pre></div>
<div id="htmlwidget-2" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-2">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"06335fb869e56cffc43ca66fd95baaec","key":"06335fb869e56cffc43ca66fd95baaec"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="定义列" class="section level3">
<h3>定义列</h3>
<p>由<code>colDef()</code>创建列定义的列表可自己定义列:</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb5-1"><a href="#cb5-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb5-2"><a href="#cb5-2"></a>  <span class="dt">Sepal.Length =</span> <span class="kw">colDef</span>(<span class="dt">name =</span> <span class="st">&quot;Sepal Length&quot;</span>),</span>
<span id="cb5-3"><a href="#cb5-3"></a>  <span class="dt">Sepal.Width =</span> <span class="kw">colDef</span>(<span class="dt">name =</span> <span class="st">&quot;Sepal Width&quot;</span>),</span>
<span id="cb5-4"><a href="#cb5-4"></a>  <span class="dt">Species =</span> <span class="kw">colDef</span>(<span class="dt">align =</span> <span class="st">&quot;center&quot;</span>)</span>
<span id="cb5-5"><a href="#cb5-5"></a>))</span></code></pre></div>
<div id="htmlwidget-3" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-3">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor","align":"center"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"70f7e88a6fbd396a8422e9d0ad3ec5fa","key":"70f7e88a6fbd396a8422e9d0ad3ec5fa"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p><code>colDef()</code>包含如下参数:name,aggregate,sortable,resizable,filterable,show,defauluSortOrder,sortNALast,format等参数,可自行查看</p>
<p>我们也可以通过指定默认的<code>colDef()</code>应用在全部的列上:</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb6-1"><a href="#cb6-1"></a><span class="kw">reactable</span>(</span>
<span id="cb6-2"><a href="#cb6-2"></a>  iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ],</span>
<span id="cb6-3"><a href="#cb6-3"></a>  <span class="dt">defaultColDef =</span> <span class="kw">colDef</span>(</span>
<span id="cb6-4"><a href="#cb6-4"></a>    <span class="dt">header =</span> <span class="cf">function</span>(value) <span class="kw">gsub</span>(<span class="st">&quot;.&quot;</span>, <span class="st">&quot; &quot;</span>, value, <span class="dt">fixed =</span> <span class="ot">TRUE</span>),</span>
<span id="cb6-5"><a href="#cb6-5"></a>    <span class="dt">cell =</span> <span class="cf">function</span>(value) <span class="kw">format</span>(value, <span class="dt">nsmall =</span> <span class="dv">1</span>),</span>
<span id="cb6-6"><a href="#cb6-6"></a>    <span class="dt">align =</span> <span class="st">&quot;center&quot;</span>,</span>
<span id="cb6-7"><a href="#cb6-7"></a>    <span class="dt">minWidth =</span> <span class="dv">70</span>,</span>
<span id="cb6-8"><a href="#cb6-8"></a>    <span class="dt">headerStyle =</span> <span class="kw">list</span>(<span class="dt">background =</span> <span class="st">&quot;#f7f7f8&quot;</span>)</span>
<span id="cb6-9"><a href="#cb6-9"></a>  ),</span>
<span id="cb6-10"><a href="#cb6-10"></a>  <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb6-11"><a href="#cb6-11"></a>    <span class="dt">Species =</span> <span class="kw">colDef</span>(<span class="dt">minWidth =</span> <span class="dv">140</span>)  <span class="co"># overrides the default</span></span>
<span id="cb6-12"><a href="#cb6-12"></a>  ),</span>
<span id="cb6-13"><a href="#cb6-13"></a>  <span class="dt">bordered =</span> <span class="ot">TRUE</span>,</span>
<span id="cb6-14"><a href="#cb6-14"></a>  <span class="dt">highlight =</span> <span class="ot">TRUE</span></span>
<span id="cb6-15"><a href="#cb6-15"></a>)</span></code></pre></div>
<div id="htmlwidget-4" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-4">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric","cell":["5.1","4.9","4.7","4.6","5.0"],"header":"Sepal Length","minWidth":70,"align":"center","headerStyle":{"background":"#f7f7f8"}},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric","cell":["3.5","3.0","3.2","3.1","3.6"],"header":"Sepal Width","minWidth":70,"align":"center","headerStyle":{"background":"#f7f7f8"}},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric","cell":["1.4","1.4","1.3","1.5","1.4"],"header":"Petal Length","minWidth":70,"align":"center","headerStyle":{"background":"#f7f7f8"}},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric","cell":["0.2","0.2","0.2","0.2","0.2"],"header":"Petal Width","minWidth":70,"align":"center","headerStyle":{"background":"#f7f7f8"}},{"accessor":"Species","name":"Species","type":"factor","cell":["setosa","setosa","setosa","setosa","setosa"],"header":"Species","minWidth":140,"align":"center","headerStyle":{"background":"#f7f7f8"}}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"highlight":true,"bordered":true,"dataKey":"5714762c72f8ceec122fad429e6271c5","key":"5714762c72f8ceec122fad429e6271c5"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="排序" class="section level3">
<h3>排序</h3>
<p>表格默认是排序.我们也可以通过点击表头排序,或者在排序时按住Shift键对多列进行排序。</p>
<div id="默认顺序排序" class="section level4">
<h4>默认顺序排序</h4>
<p>默认情况下，表按照升序排序，要自定义排序顺序，通过设置<code>defaultSortOrder</code>在表上或列上设置<code>asc</code>或<code>desc</code>:</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb7-1"><a href="#cb7-1"></a><span class="kw">reactable</span>(</span>
<span id="cb7-2"><a href="#cb7-2"></a>  iris[<span class="dv">48</span><span class="op">:</span><span class="dv">52</span>, ],</span>
<span id="cb7-3"><a href="#cb7-3"></a>  <span class="dt">defaultSortOrder =</span> <span class="st">&quot;desc&quot;</span>,</span>
<span id="cb7-4"><a href="#cb7-4"></a>  <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb7-5"><a href="#cb7-5"></a>    <span class="dt">Species =</span> <span class="kw">colDef</span>(<span class="dt">defaultSortOrder =</span> <span class="st">&quot;asc&quot;</span>)</span>
<span id="cb7-6"><a href="#cb7-6"></a>  )</span>
<span id="cb7-7"><a href="#cb7-7"></a>)</span></code></pre></div>
<div id="htmlwidget-5" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-5">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[4.6,5.3,5,7,6.4],"Sepal.Width":[3.2,3.7,3.3,3.2,3.2],"Petal.Length":[1.4,1.5,1.4,4.7,4.5],"Petal.Width":[0.2,0.2,0.2,1.4,1.5],"Species":["setosa","setosa","setosa","versicolor","versicolor"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor","defaultSortDesc":false}],"defaultSortDesc":true,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"d14d337eda5870152127fcc10f2ea021","key":"d14d337eda5870152127fcc10f2ea021"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="默认排序列" class="section level4">
<h4>默认排序列</h4>
<p>我们可以通过指定<code>defaultSorted</code>向量来排序:</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb8-1"><a href="#cb8-1"></a><span class="kw">reactable</span>(iris[<span class="dv">48</span><span class="op">:</span><span class="dv">52</span>, ], <span class="dt">defaultSorted =</span> <span class="kw">c</span>(<span class="st">&quot;Species&quot;</span>, <span class="st">&quot;Petal.Length&quot;</span>))</span></code></pre></div>
<div id="htmlwidget-6" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-6">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[4.6,5.3,5,7,6.4],"Sepal.Width":[3.2,3.7,3.3,3.2,3.2],"Petal.Length":[1.4,1.5,1.4,4.7,4.5],"Petal.Width":[0.2,0.2,0.2,1.4,1.5],"Species":["setosa","setosa","setosa","versicolor","versicolor"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultSorted":[{"id":"Species","desc":false},{"id":"Petal.Length","desc":false}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"5fe4313f6f4be8f090e0e3b401451120","key":"5fe4313f6f4be8f090e0e3b401451120"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>还可以通过提供一个列表来自定义排序顺序:</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb9-1"><a href="#cb9-1"></a><span class="kw">reactable</span>(iris[<span class="dv">48</span><span class="op">:</span><span class="dv">52</span>, ], <span class="dt">defaultSorted =</span> <span class="kw">list</span>(<span class="dt">Species =</span> <span class="st">&quot;asc&quot;</span>, <span class="dt">Petal.Length =</span> <span class="st">&quot;desc&quot;</span>))</span></code></pre></div>
<div id="htmlwidget-7" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-7">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[4.6,5.3,5,7,6.4],"Sepal.Width":[3.2,3.7,3.3,3.2,3.2],"Petal.Length":[1.4,1.5,1.4,4.7,4.5],"Petal.Width":[0.2,0.2,0.2,1.4,1.5],"Species":["setosa","setosa","setosa","versicolor","versicolor"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultSorted":[{"id":"Species","desc":false},{"id":"Petal.Length","desc":true}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"5fe4313f6f4be8f090e0e3b401451120","key":"5fe4313f6f4be8f090e0e3b401451120"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="缺失值排序" class="section level4">
<h4>缺失值排序</h4>
<p>通过<code>sortNaLast</code>在列上设置忽略缺失值:</p>
<div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb10-1"><a href="#cb10-1"></a><span class="kw">reactable</span>(</span>
<span id="cb10-2"><a href="#cb10-2"></a>  <span class="kw">data.frame</span>(</span>
<span id="cb10-3"><a href="#cb10-3"></a>    <span class="dt">n =</span> <span class="kw">c</span>(<span class="dv">1</span>, <span class="dv">2</span>, <span class="dv">3</span>, <span class="op">-</span><span class="ot">Inf</span>, <span class="ot">Inf</span>),</span>
<span id="cb10-4"><a href="#cb10-4"></a>    <span class="dt">x =</span> <span class="kw">c</span>(<span class="dv">2</span>, <span class="dv">3</span>, <span class="dv">1</span>, <span class="ot">NA</span>, <span class="ot">NaN</span>),</span>
<span id="cb10-5"><a href="#cb10-5"></a>    <span class="dt">y =</span> <span class="kw">c</span>(<span class="st">&quot;aa&quot;</span>, <span class="st">&quot;cc&quot;</span>, <span class="st">&quot;bb&quot;</span>, <span class="ot">NA</span>, <span class="ot">NA</span>)</span>
<span id="cb10-6"><a href="#cb10-6"></a>  ),</span>
<span id="cb10-7"><a href="#cb10-7"></a>  <span class="dt">defaultColDef =</span> <span class="kw">colDef</span>(<span class="dt">sortNALast =</span> <span class="ot">TRUE</span>),</span>
<span id="cb10-8"><a href="#cb10-8"></a>  <span class="dt">defaultSorted =</span> <span class="st">&quot;x&quot;</span></span>
<span id="cb10-9"><a href="#cb10-9"></a>)</span></code></pre></div>
<div id="htmlwidget-8" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-8">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"n":[1,2,3,"-Inf","Inf"],"x":[2,3,1,"NA","NaN"],"y":["aa","cc","bb",null,null]},"columns":[{"accessor":"n","name":"n","type":"numeric","sortNALast":true},{"accessor":"x","name":"x","type":"numeric","sortNALast":true},{"accessor":"y","name":"y","type":"character","sortNALast":true}],"defaultSorted":[{"id":"x","desc":false}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"18e1eeb19f9e00806da94dda3d33a37a","key":"18e1eeb19f9e00806da94dda3d33a37a"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="不排序" class="section level4">
<h4>不排序</h4>
<p>通过在表或列上设置<code>sortable</code>禁用排序,当只有一些列是可排序时,有助于使用<code>showSortable</code>参数显示可排序的列:</p>
<div class="sourceCode" id="cb11"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb11-1"><a href="#cb11-1"></a><span class="kw">reactable</span>(</span>
<span id="cb11-2"><a href="#cb11-2"></a>  iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ],</span>
<span id="cb11-3"><a href="#cb11-3"></a>  <span class="dt">sortable =</span> <span class="ot">FALSE</span>,</span>
<span id="cb11-4"><a href="#cb11-4"></a>  <span class="dt">showSortable =</span> <span class="ot">TRUE</span>,</span>
<span id="cb11-5"><a href="#cb11-5"></a>  <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb11-6"><a href="#cb11-6"></a>    <span class="dt">Petal.Width =</span> <span class="kw">colDef</span>(<span class="dt">sortable =</span> <span class="ot">TRUE</span>),</span>
<span id="cb11-7"><a href="#cb11-7"></a>    <span class="dt">Petal.Length =</span> <span class="kw">colDef</span>(<span class="dt">sortable =</span> <span class="ot">TRUE</span>)</span>
<span id="cb11-8"><a href="#cb11-8"></a>  )</span>
<span id="cb11-9"><a href="#cb11-9"></a>)</span></code></pre></div>
<div id="htmlwidget-9" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-9">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric","sortable":true},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric","sortable":true},{"accessor":"Species","name":"Species","type":"factor"}],"sortable":false,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"showSortable":true,"dataKey":"22be7dcc8be0edb25dacb1b02e43b068","key":"22be7dcc8be0edb25dacb1b02e43b068"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="隐藏排序图标" class="section level4">
<h4>隐藏排序图标</h4>
<div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb12-1"><a href="#cb12-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">showSortIcon =</span> <span class="ot">FALSE</span>)</span></code></pre></div>
<div id="htmlwidget-10" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-10">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"showSortIcon":false,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="筛选" class="section level3">
<h3>筛选</h3>
<p>使用<code>filterable</code>来筛选添加筛选器筛选.</p>
<div class="sourceCode" id="cb13"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb13-1"><a href="#cb13-1"></a>data &lt;-<span class="st"> </span>MASS<span class="op">::</span>Cars93[<span class="dv">1</span><span class="op">:</span><span class="dv">20</span>, <span class="kw">c</span>(<span class="st">&quot;Manufacturer&quot;</span>, <span class="st">&quot;Model&quot;</span>, <span class="st">&quot;Type&quot;</span>, <span class="st">&quot;AirBags&quot;</span>, <span class="st">&quot;Price&quot;</span>)]</span>
<span id="cb13-2"><a href="#cb13-2"></a></span>
<span id="cb13-3"><a href="#cb13-3"></a><span class="kw">reactable</span>(data, <span class="dt">filterable =</span> <span class="ot">TRUE</span>, <span class="dt">minRows =</span> <span class="dv">10</span>)</span></code></pre></div>
<div id="htmlwidget-11" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-11">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor"},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"AirBags","name":"AirBags","type":"factor"},{"accessor":"Price","name":"Price","type":"numeric"}],"filterable":true,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":10,"dataKey":"a5fc869b6589bc101d94b240281b8845","key":"a5fc869b6589bc101d94b240281b8845"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>为了给指定列添加筛选器,通过自定义列<code>colDef</code>设定<code>filterable</code>:</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb14-1"><a href="#cb14-1"></a><span class="kw">reactable</span>(data, <span class="dt">filterable =</span> <span class="ot">TRUE</span>, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb14-2"><a href="#cb14-2"></a>  <span class="dt">Price =</span> <span class="kw">colDef</span>(<span class="dt">filterable =</span> <span class="ot">FALSE</span>)</span>
<span id="cb14-3"><a href="#cb14-3"></a>))</span></code></pre></div>
<div id="htmlwidget-12" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-12">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor"},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"AirBags","name":"AirBags","type":"factor"},{"accessor":"Price","name":"Price","type":"numeric","filterable":false}],"filterable":true,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"f431a01fe8b22395e0e5160b0c4d47ec","key":"f431a01fe8b22395e0e5160b0c4d47ec"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="查找" class="section level3">
<h3>查找</h3>
<p>使用<code>searchable</code>命令使整个表可搜索:</p>
<div class="sourceCode" id="cb15"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb15-1"><a href="#cb15-1"></a>data &lt;-<span class="st"> </span>MASS<span class="op">::</span>Cars93[<span class="dv">1</span><span class="op">:</span><span class="dv">20</span>, <span class="kw">c</span>(<span class="st">&quot;Manufacturer&quot;</span>, <span class="st">&quot;Model&quot;</span>, <span class="st">&quot;Type&quot;</span>, <span class="st">&quot;AirBags&quot;</span>, <span class="st">&quot;Price&quot;</span>)]</span>
<span id="cb15-2"><a href="#cb15-2"></a></span>
<span id="cb15-3"><a href="#cb15-3"></a><span class="kw">reactable</span>(data, <span class="dt">searchable =</span> <span class="ot">TRUE</span>, <span class="dt">minRows =</span> <span class="dv">10</span>)</span></code></pre></div>
<div id="htmlwidget-13" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-13">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor"},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"AirBags","name":"AirBags","type":"factor"},{"accessor":"Price","name":"Price","type":"numeric"}],"searchable":true,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":10,"dataKey":"a5fc869b6589bc101d94b240281b8845","key":"a5fc869b6589bc101d94b240281b8845"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="分页" class="section level3">
<h3>分页</h3>
<p>通过设置<code>defaultPageSize</code>更改默认页面大小:</p>
<div class="sourceCode" id="cb16"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb16-1"><a href="#cb16-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">6</span>, ], <span class="dt">defaultPageSize =</span> <span class="dv">4</span>)</span></code></pre></div>
<div id="htmlwidget-14" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-14">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"f59dcb7d7ede1236d0f5af3faafa3154","key":"f59dcb7d7ede1236d0f5af3faafa3154"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>也可以通过设置每一页最小行<code>minRows</code>:</p>
<div class="sourceCode" id="cb17"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb17-1"><a href="#cb17-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">6</span>, ], <span class="dt">defaultPageSize =</span> <span class="dv">4</span>, <span class="dt">minRows =</span> <span class="dv">4</span>, <span class="dt">searchable =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-15" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-15">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"paginationType":"numbers","showPageInfo":true,"minRows":4,"dataKey":"f59dcb7d7ede1236d0f5af3faafa3154","key":"f59dcb7d7ede1236d0f5af3faafa3154"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<div id="页面大小选项" class="section level4">
<h4>页面大小选项</h4>
<p>显示页面大小的下拉菜单,供用户使用进行选择<code>showPageSizeOptions</code>.页面大小选项可以通过<code>pageSizeOptions</code>方式自定义：</p>
<div class="sourceCode" id="cb18"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb18-1"><a href="#cb18-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">12</span>, ], <span class="dt">showPageSizeOptions =</span> <span class="ot">TRUE</span>, <span class="dt">pageSizeOptions =</span> <span class="kw">c</span>(<span class="dv">4</span>, <span class="dv">8</span>, <span class="dv">12</span>), <span class="dt">defaultPageSize =</span> <span class="dv">4</span>)</span></code></pre></div>
<div id="htmlwidget-16" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-16">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"showPageSizeOptions":true,"pageSizeOptions":[4,8,12],"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"1c52ef07139c3e333fff4caeab6dbd23","key":"1c52ef07139c3e333fff4caeab6dbd23"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="分页类型" class="section level4">
<h4>分页类型</h4>
<p>可以通过设置<code>paginationType</code>:
- <code>jump</code> 跳转任意页
- <code>simple</code> 仅显示上一页/下一页</p>
<p><strong>jump</strong></p>
<div class="sourceCode" id="cb19"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb19-1"><a href="#cb19-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">50</span>, ], <span class="dt">paginationType =</span> <span class="st">&quot;jump&quot;</span>, <span class="dt">defaultPageSize =</span> <span class="dv">4</span>)</span></code></pre></div>
<div id="htmlwidget-17" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-17">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"paginationType":"jump","showPageInfo":true,"minRows":1,"dataKey":"74e0aebc6034380f20b99276a38aecd6","key":"74e0aebc6034380f20b99276a38aecd6"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p><strong>simple</strong></p>
<div class="sourceCode" id="cb20"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb20-1"><a href="#cb20-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">50</span>, ], <span class="dt">paginationType =</span> <span class="st">&quot;simple&quot;</span>, <span class="dt">defaultPageSize =</span> <span class="dv">4</span>)</span></code></pre></div>
<div id="htmlwidget-18" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-18">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"paginationType":"simple","showPageInfo":true,"minRows":1,"dataKey":"74e0aebc6034380f20b99276a38aecd6","key":"74e0aebc6034380f20b99276a38aecd6"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="隐藏页面信息" class="section level4">
<h4>隐藏页面信息</h4>
<div class="sourceCode" id="cb21"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb21-1"><a href="#cb21-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">12</span>, ], <span class="dt">showPageInfo =</span> <span class="ot">FALSE</span>, <span class="dt">defaultPageSize =</span> <span class="dv">4</span>)</span></code></pre></div>
<div id="htmlwidget-19" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-19">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"paginationType":"numbers","showPageInfo":false,"minRows":1,"dataKey":"1c52ef07139c3e333fff4caeab6dbd23","key":"1c52ef07139c3e333fff4caeab6dbd23"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<div class="sourceCode" id="cb22"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb22-1"><a href="#cb22-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">12</span>, ], <span class="dt">showPageInfo =</span> <span class="ot">FALSE</span>, <span class="dt">showPageSizeOptions =</span> <span class="ot">TRUE</span>, <span class="dt">defaultPageSize =</span> <span class="dv">4</span>)</span></code></pre></div>
<div id="htmlwidget-20" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-20">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"showPageSizeOptions":true,"pageSizeOptions":[10,25,50,100],"paginationType":"numbers","showPageInfo":false,"minRows":1,"dataKey":"1c52ef07139c3e333fff4caeab6dbd23","key":"1c52ef07139c3e333fff4caeab6dbd23"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="始终显示分页" class="section level4">
<h4>始终显示分页</h4>
<p>默认情况下,当表只有一页时,则隐藏分页,想要始终显示分页设置<code>showPagination</code>为<code>TRUE</code>.</p>
<div class="sourceCode" id="cb23"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb23-1"><a href="#cb23-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">showPagination =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-21" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-21">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPagination":true,"showPageInfo":true,"minRows":1,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="不分页" class="section level4">
<h4>不分页</h4>
<p>使参数<code>pagination</code>等于FALSE</p>
<div class="sourceCode" id="cb24"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb24-1"><a href="#cb24-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">20</span>, ], <span class="dt">pagination =</span> <span class="ot">FALSE</span>, <span class="dt">highlight =</span> <span class="ot">TRUE</span>, <span class="dt">height =</span> <span class="dv">250</span>)</span></code></pre></div>
<div id="htmlwidget-22" class="reactable html-widget" style="width:auto;height:250px;"></div>
<script type="application/json" data-for="htmlwidget-22">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":20,"paginationType":"numbers","showPageInfo":true,"minRows":1,"highlight":true,"height":"250px","dataKey":"4e240043471d22f5a9b46fa198c4b92d","key":"4e240043471d22f5a9b46fa198c4b92d"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="分组聚合" class="section level3">
<h3>分组聚合</h3>
<p>通过指定一列或多列到参数<code>groupBy</code>:</p>
<div class="sourceCode" id="cb25"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb25-1"><a href="#cb25-1"></a>data &lt;-<span class="st"> </span>MASS<span class="op">::</span>Cars93[<span class="dv">10</span><span class="op">:</span><span class="dv">22</span>, <span class="kw">c</span>(<span class="st">&quot;Manufacturer&quot;</span>, <span class="st">&quot;Model&quot;</span>, <span class="st">&quot;Type&quot;</span>, <span class="st">&quot;Price&quot;</span>, <span class="st">&quot;MPG.city&quot;</span>)]</span>
<span id="cb25-2"><a href="#cb25-2"></a></span>
<span id="cb25-3"><a href="#cb25-3"></a><span class="kw">reactable</span>(data, <span class="dt">groupBy =</span> <span class="st">&quot;Manufacturer&quot;</span>)</span></code></pre></div>
<div id="htmlwidget-23" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-23">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser","Chrysler","Chrysler"],"Model":["DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde","LeBaron","Imperial"],"Type":["Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large","Compact","Large"],"Price":[34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4,15.8,29.5],"MPG.city":[16,16,25,25,19,21,18,15,17,17,20,23,20]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor"},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Price","name":"Price","type":"numeric"},{"accessor":"MPG.city","name":"MPG.city","type":"numeric"}],"pivotBy":["Manufacturer"],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"7a95a65ee2455db1c40442a420939a8c","key":"7a95a65ee2455db1c40442a420939a8c"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>当行被分组时,可以利用<code>aggregate</code>指定聚合功能:</p>
<div class="sourceCode" id="cb26"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb26-1"><a href="#cb26-1"></a>data &lt;-<span class="st"> </span>MASS<span class="op">::</span>Cars93[<span class="dv">14</span><span class="op">:</span><span class="dv">38</span>, <span class="kw">c</span>(<span class="st">&quot;Type&quot;</span>, <span class="st">&quot;Price&quot;</span>, <span class="st">&quot;MPG.city&quot;</span>, <span class="st">&quot;DriveTrain&quot;</span>, <span class="st">&quot;Man.trans.avail&quot;</span>)]</span>
<span id="cb26-2"><a href="#cb26-2"></a></span>
<span id="cb26-3"><a href="#cb26-3"></a><span class="kw">reactable</span>(data, <span class="dt">groupBy =</span> <span class="st">&quot;Type&quot;</span>, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb26-4"><a href="#cb26-4"></a>  <span class="dt">Price =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;max&quot;</span>),</span>
<span id="cb26-5"><a href="#cb26-5"></a>  <span class="dt">MPG.city =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;mean&quot;</span>, <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">digits =</span> <span class="dv">1</span>)),</span>
<span id="cb26-6"><a href="#cb26-6"></a>  <span class="dt">DriveTrain =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;unique&quot;</span>),</span>
<span id="cb26-7"><a href="#cb26-7"></a>  <span class="dt">Man.trans.avail =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;frequency&quot;</span>)</span>
<span id="cb26-8"><a href="#cb26-8"></a>))</span></code></pre></div>
<div id="htmlwidget-24" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-24">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Type":["Sporty","Midsize","Van","Van","Large","Sporty","Large","Compact","Large","Small","Small","Compact","Van","Midsize","Sporty","Small","Large","Small","Small","Compact","Sporty","Sporty","Van","Midsize","Large"],"Price":[15.1,15.9,16.3,16.6,18.8,38,18.4,15.8,29.5,9.2,11.3,13.3,19,15.6,25.8,12.2,19.3,7.4,10.1,11.3,15.9,14,19.9,20.2,20.9],"MPG.city":[19,21,18,15,17,17,20,23,20,29,23,22,17,21,18,29,20,31,23,22,22,24,15,21,18],"DriveTrain":["Rear","Front","Front","4WD","Rear","Rear","Front","Front","Front","Front","Front","Front","4WD","Front","4WD","Front","Front","Front","Front","Front","Rear","Front","4WD","Front","Rear"],"Man.trans.avail":["Yes","No","No","No","No","Yes","No","No","No","Yes","Yes","Yes","No","No","Yes","Yes","No","Yes","Yes","Yes","Yes","Yes","Yes","No","No"]},"columns":[{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Price","name":"Price","type":"numeric","aggregate":"max"},{"accessor":"MPG.city","name":"MPG.city","type":"numeric","aggregate":"mean","format":{"cell":{"digits":1},"aggregated":{"digits":1}}},{"accessor":"DriveTrain","name":"DriveTrain","type":"factor","aggregate":"unique"},{"accessor":"Man.trans.avail","name":"Man.trans.avail","type":"factor","aggregate":"frequency"}],"pivotBy":["Type"],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"55aeffa596b5e3fba3fc7fc5e4443d3f","key":"55aeffa596b5e3fba3fc7fc5e4443d3f"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>可使用的聚合功能</p>
<div class="sourceCode" id="cb27"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb27-1"><a href="#cb27-1"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;sum&quot;</span>)        <span class="co"># Sum of numbers</span></span>
<span id="cb27-2"><a href="#cb27-2"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;mean&quot;</span>)       <span class="co"># Mean of numbers</span></span>
<span id="cb27-3"><a href="#cb27-3"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;max&quot;</span>)        <span class="co"># Maximum of numbers</span></span>
<span id="cb27-4"><a href="#cb27-4"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;min&quot;</span>)        <span class="co"># Minimum of numbers</span></span>
<span id="cb27-5"><a href="#cb27-5"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;median&quot;</span>)     <span class="co"># Median of numbers</span></span>
<span id="cb27-6"><a href="#cb27-6"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;count&quot;</span>)      <span class="co"># Count of values</span></span>
<span id="cb27-7"><a href="#cb27-7"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;unique&quot;</span>)     <span class="co"># Comma-separated list of unique values</span></span>
<span id="cb27-8"><a href="#cb27-8"></a><span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;frequency&quot;</span>)  <span class="co"># Comma-separated counts of unique values</span></span></code></pre></div>
<p>或者在<code>JavaScropt</code>中自定义聚合功能</p>
<div class="sourceCode" id="cb28"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb28-1"><a href="#cb28-1"></a><span class="kw">colDef</span>(</span>
<span id="cb28-2"><a href="#cb28-2"></a>  <span class="dt">aggregate =</span> <span class="kw">JS</span>(<span class="st">&quot;</span></span>
<span id="cb28-3"><a href="#cb28-3"></a><span class="st">    function(values, rows) {</span></span>
<span id="cb28-4"><a href="#cb28-4"></a><span class="st">      // input:</span></span>
<span id="cb28-5"><a href="#cb28-5"></a><span class="st">      //  - values: an array of all values in the group</span></span>
<span id="cb28-6"><a href="#cb28-6"></a><span class="st">      //  - rows: an array of row data objects for all rows in the group (optional)</span></span>
<span id="cb28-7"><a href="#cb28-7"></a><span class="st">      //</span></span>
<span id="cb28-8"><a href="#cb28-8"></a><span class="st">      // output:</span></span>
<span id="cb28-9"><a href="#cb28-9"></a><span class="st">      //  - an aggregated value, e.g. a comma-separated list</span></span>
<span id="cb28-10"><a href="#cb28-10"></a><span class="st">      return values.join(&#39;, &#39;)</span></span>
<span id="cb28-11"><a href="#cb28-11"></a><span class="st">    }</span></span>
<span id="cb28-12"><a href="#cb28-12"></a><span class="st">  &quot;</span>)</span>
<span id="cb28-13"><a href="#cb28-13"></a>)</span></code></pre></div>
<div id="多列分组" class="section level4">
<h4>多列分组</h4>
<div class="sourceCode" id="cb29"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb29-1"><a href="#cb29-1"></a>data &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</span>
<span id="cb29-2"><a href="#cb29-2"></a>  <span class="dt">State =</span> state.name,</span>
<span id="cb29-3"><a href="#cb29-3"></a>  <span class="dt">Region =</span> state.region,</span>
<span id="cb29-4"><a href="#cb29-4"></a>  <span class="dt">Division =</span> state.division,</span>
<span id="cb29-5"><a href="#cb29-5"></a>  <span class="dt">Area =</span> state.area</span>
<span id="cb29-6"><a href="#cb29-6"></a>)</span>
<span id="cb29-7"><a href="#cb29-7"></a></span>
<span id="cb29-8"><a href="#cb29-8"></a><span class="kw">reactable</span>(</span>
<span id="cb29-9"><a href="#cb29-9"></a>  data,</span>
<span id="cb29-10"><a href="#cb29-10"></a>  <span class="dt">groupBy =</span> <span class="kw">c</span>(<span class="st">&quot;Region&quot;</span>, <span class="st">&quot;Division&quot;</span>),</span>
<span id="cb29-11"><a href="#cb29-11"></a>  <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb29-12"><a href="#cb29-12"></a>    <span class="dt">Division =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;unique&quot;</span>),</span>
<span id="cb29-13"><a href="#cb29-13"></a>    <span class="dt">Area =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;sum&quot;</span>, <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">separators =</span> <span class="ot">TRUE</span>))</span>
<span id="cb29-14"><a href="#cb29-14"></a>  ),</span>
<span id="cb29-15"><a href="#cb29-15"></a>  <span class="dt">bordered =</span> <span class="ot">TRUE</span></span>
<span id="cb29-16"><a href="#cb29-16"></a>)</span></code></pre></div>
<div id="htmlwidget-25" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-25">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"State":["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"],"Region":["South","West","West","South","West","West","Northeast","South","South","South","West","West","North Central","North Central","North Central","North Central","South","South","Northeast","South","Northeast","North Central","North Central","South","North Central","West","North Central","West","Northeast","Northeast","West","Northeast","South","North Central","North Central","South","West","Northeast","Northeast","South","North Central","South","South","West","Northeast","South","West","South","North Central","West"],"Division":["East South Central","Pacific","Mountain","West South Central","Pacific","Mountain","New England","South Atlantic","South Atlantic","South Atlantic","Pacific","Mountain","East North Central","East North Central","West North Central","West North Central","East South Central","West South Central","New England","South Atlantic","New England","East North Central","West North Central","East South Central","West North Central","Mountain","West North Central","Mountain","New England","Middle Atlantic","Mountain","Middle Atlantic","South Atlantic","West North Central","East North Central","West South Central","Pacific","Middle Atlantic","New England","South Atlantic","West North Central","East South Central","West South Central","Mountain","New England","South Atlantic","Pacific","South Atlantic","East North Central","Mountain"],"Area":[51609,589757,113909,53104,158693,104247,5009,2057,58560,58876,6450,83557,56400,36291,56290,82264,40395,48523,33215,10577,8257,58216,84068,47716,69686,147138,77227,110540,9304,7836,121666,49576,52586,70665,41222,69919,96981,45333,1214,31055,77047,42244,267339,84916,9609,40815,68192,24181,56154,97914]},"columns":[{"accessor":"State","name":"State","type":"character"},{"accessor":"Region","name":"Region","type":"factor"},{"accessor":"Division","name":"Division","type":"factor","aggregate":"unique"},{"accessor":"Area","name":"Area","type":"numeric","aggregate":"sum","format":{"cell":{"separators":true},"aggregated":{"separators":true}}}],"pivotBy":["Region","Division"],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"bordered":true,"dataKey":"4f6b96e4f81c8ba849bd5bb13cc9de33","key":"4f6b96e4f81c8ba849bd5bb13cc9de33"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="自定义聚合功能" class="section level4">
<h4>自定义聚合功能</h4>
<p>在计算占比这些会很有用,js代码完全看不懂,这部分可留着以后学习:</p>
<div class="sourceCode" id="cb30"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb30-1"><a href="#cb30-1"></a><span class="kw">library</span>(dplyr)</span></code></pre></div>
<pre><code>## 
## Attaching package: &#39;dplyr&#39;</code></pre>
<pre><code>## The following objects are masked from &#39;package:stats&#39;:
## 
##     filter, lag</code></pre>
<pre><code>## The following objects are masked from &#39;package:base&#39;:
## 
##     intersect, setdiff, setequal, union</code></pre>
<div class="sourceCode" id="cb34"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb34-1"><a href="#cb34-1"></a><span class="kw">set.seed</span>(<span class="dv">10</span>)</span>
<span id="cb34-2"><a href="#cb34-2"></a></span>
<span id="cb34-3"><a href="#cb34-3"></a>data &lt;-<span class="st"> </span><span class="kw">sample_n</span>(MASS<span class="op">::</span>Cars93[<span class="dv">23</span><span class="op">:</span><span class="dv">40</span>, ], <span class="dv">30</span>, <span class="dt">replace =</span> <span class="ot">TRUE</span>) <span class="op">%&gt;%</span></span>
<span id="cb34-4"><a href="#cb34-4"></a><span class="st">  </span><span class="kw">mutate</span>(<span class="dt">Price =</span> Price <span class="op">*</span><span class="st"> </span><span class="dv">3</span>, <span class="dt">Units =</span> <span class="kw">sample</span>(<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, <span class="dv">30</span>, <span class="dt">replace =</span> <span class="ot">TRUE</span>)) <span class="op">%&gt;%</span></span>
<span id="cb34-5"><a href="#cb34-5"></a><span class="st">  </span><span class="kw">mutate</span>(<span class="dt">Avg.Price =</span> Price <span class="op">/</span><span class="st"> </span>Units) <span class="op">%&gt;%</span></span>
<span id="cb34-6"><a href="#cb34-6"></a><span class="st">  </span><span class="kw">select</span>(Model, Manufacturer, Price, Units, Avg.Price)</span>
<span id="cb34-7"><a href="#cb34-7"></a></span>
<span id="cb34-8"><a href="#cb34-8"></a><span class="kw">reactable</span>(</span>
<span id="cb34-9"><a href="#cb34-9"></a>  data,</span>
<span id="cb34-10"><a href="#cb34-10"></a>  <span class="dt">groupBy =</span> <span class="st">&quot;Manufacturer&quot;</span>,</span>
<span id="cb34-11"><a href="#cb34-11"></a>  <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb34-12"><a href="#cb34-12"></a>    <span class="dt">Price =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;sum&quot;</span>, <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;USD&quot;</span>)),</span>
<span id="cb34-13"><a href="#cb34-13"></a>    <span class="dt">Units =</span> <span class="kw">colDef</span>(<span class="dt">aggregate =</span> <span class="st">&quot;sum&quot;</span>),</span>
<span id="cb34-14"><a href="#cb34-14"></a>    <span class="dt">Avg.Price =</span> <span class="kw">colDef</span>(</span>
<span id="cb34-15"><a href="#cb34-15"></a>      <span class="co"># Calculate the aggregate Avg.Price as `sum(Price) / sum(Units)`</span></span>
<span id="cb34-16"><a href="#cb34-16"></a>      <span class="dt">aggregate =</span> <span class="kw">JS</span>(<span class="st">&quot;function(values, rows) {</span></span>
<span id="cb34-17"><a href="#cb34-17"></a><span class="st">        var totalPrice = 0</span></span>
<span id="cb34-18"><a href="#cb34-18"></a><span class="st">        var totalUnits = 0</span></span>
<span id="cb34-19"><a href="#cb34-19"></a><span class="st">        rows.forEach(function(row) {</span></span>
<span id="cb34-20"><a href="#cb34-20"></a><span class="st">          totalPrice += row[&#39;Price&#39;]</span></span>
<span id="cb34-21"><a href="#cb34-21"></a><span class="st">          totalUnits += row[&#39;Units&#39;]</span></span>
<span id="cb34-22"><a href="#cb34-22"></a><span class="st">        })</span></span>
<span id="cb34-23"><a href="#cb34-23"></a><span class="st">        return totalPrice / totalUnits</span></span>
<span id="cb34-24"><a href="#cb34-24"></a><span class="st">      }&quot;</span>),</span>
<span id="cb34-25"><a href="#cb34-25"></a>      <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;USD&quot;</span>)</span>
<span id="cb34-26"><a href="#cb34-26"></a>    )</span>
<span id="cb34-27"><a href="#cb34-27"></a>  )</span>
<span id="cb34-28"><a href="#cb34-28"></a>)</span></code></pre></div>
<div id="htmlwidget-26" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-26">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Model":["Tempo","Festiva","Escort","Crown_Victoria","Mustang","Vision","Summit","Taurus","Taurus","Escort","Summit","Escort","Shadow","Probe","Vision","Aerostar","Summit","Stealth","Summit","Storm","Storm","Probe","Dynasty","Colt","Summit","Storm","Caravan","Storm","Storm","Tempo"],"Manufacturer":["Ford","Ford","Ford","Ford","Ford","Eagle","Eagle","Ford","Ford","Ford","Eagle","Ford","Dodge","Ford","Eagle","Ford","Eagle","Dodge","Eagle","Geo","Geo","Ford","Dodge","Dodge","Eagle","Geo","Dodge","Geo","Geo","Ford"],"Price":[33.9,22.2,30.3,62.7,47.7,57.9,36.6,60.6,60.6,30.3,36.6,30.3,33.9,42,57.9,59.7,36.6,77.4,36.6,37.5,37.5,42,46.8,27.6,36.6,37.5,57,37.5,37.5,33.9],"Units":[1,2,4,3,2,5,1,1,1,5,2,1,1,2,5,4,3,1,3,2,2,2,2,5,3,5,5,5,3,1],"Avg.Price":[33.9,11.1,7.575,20.9,23.85,11.58,36.6,60.6,60.6,6.06,18.3,30.3,33.9,21,11.58,14.925,12.2,77.4,12.2,18.75,18.75,21,23.4,5.52,12.2,7.5,11.4,7.5,12.5,33.9]},"columns":[{"accessor":"Model","name":"Model","type":"factor"},{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Price","name":"Price","type":"numeric","aggregate":"sum","format":{"cell":{"currency":"USD"},"aggregated":{"currency":"USD"}}},{"accessor":"Units","name":"Units","type":"numeric","aggregate":"sum"},{"accessor":"Avg.Price","name":"Avg.Price","type":"numeric","aggregate":"function(values, rows) {\n        var totalPrice = 0\n        var totalUnits = 0\n        rows.forEach(function(row) {\n          totalPrice += row['Price']\n          totalUnits += row['Units']\n        })\n        return totalPrice / totalUnits\n      }","format":{"cell":{"currency":"USD"},"aggregated":{"currency":"USD"}}}],"pivotBy":["Manufacturer"],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"4a0a7d1de5785d6f8894d34fe833e50f","key":"4a0a7d1de5785d6f8894d34fe833e50f"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.4.aggregate"],"jsHooks":[]}</script>
</div>
</div>
<div id="列样式" class="section level3">
<h3>列样式</h3>
<p>通过参数<code>colFormat()</code>格式化列</p>
<div class="sourceCode" id="cb35"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb35-1"><a href="#cb35-1"></a>data &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</span>
<span id="cb35-2"><a href="#cb35-2"></a>  <span class="dt">price_USD =</span> <span class="kw">c</span>(<span class="fl">123456.56</span>, <span class="dv">132</span>, <span class="fl">5650.12</span>),</span>
<span id="cb35-3"><a href="#cb35-3"></a>  <span class="dt">price_INR =</span> <span class="kw">c</span>(<span class="dv">350</span>, <span class="fl">23208.552</span>, <span class="fl">1773156.4</span>),</span>
<span id="cb35-4"><a href="#cb35-4"></a>  <span class="dt">number_FR =</span> <span class="kw">c</span>(<span class="fl">123456.56</span>, <span class="dv">132</span>, <span class="fl">5650.12</span>),</span>
<span id="cb35-5"><a href="#cb35-5"></a>  <span class="dt">temp =</span> <span class="kw">c</span>(<span class="dv">22</span>, <span class="ot">NA</span>, <span class="dv">31</span>),</span>
<span id="cb35-6"><a href="#cb35-6"></a>  <span class="dt">percent =</span> <span class="kw">c</span>(<span class="fl">0.9525556</span>, <span class="fl">0.5</span>, <span class="fl">0.112</span>),</span>
<span id="cb35-7"><a href="#cb35-7"></a>  <span class="dt">date =</span> <span class="kw">as.Date</span>(<span class="kw">c</span>(<span class="st">&quot;2019-01-02&quot;</span>, <span class="st">&quot;2019-03-15&quot;</span>, <span class="st">&quot;2019-09-22&quot;</span>))</span>
<span id="cb35-8"><a href="#cb35-8"></a>)</span>
<span id="cb35-9"><a href="#cb35-9"></a></span>
<span id="cb35-10"><a href="#cb35-10"></a><span class="kw">reactable</span>(data, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb35-11"><a href="#cb35-11"></a>  <span class="dt">price_USD =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">prefix =</span> <span class="st">&quot;$&quot;</span>, <span class="dt">separators =</span> <span class="ot">TRUE</span>, <span class="dt">digits =</span> <span class="dv">2</span>)),</span>
<span id="cb35-12"><a href="#cb35-12"></a>  <span class="dt">price_INR =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;INR&quot;</span>, <span class="dt">separators =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;hi-IN&quot;</span>)),</span>
<span id="cb35-13"><a href="#cb35-13"></a>  <span class="dt">number_FR =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">locales =</span> <span class="st">&quot;fr-FR&quot;</span>)),</span>
<span id="cb35-14"><a href="#cb35-14"></a>  <span class="dt">temp =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">suffix =</span> <span class="st">&quot; °C&quot;</span>)),</span>
<span id="cb35-15"><a href="#cb35-15"></a>  <span class="dt">percent =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">percent =</span> <span class="ot">TRUE</span>, <span class="dt">digits =</span> <span class="dv">1</span>)),</span>
<span id="cb35-16"><a href="#cb35-16"></a>  <span class="dt">date =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">date =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;en-GB&quot;</span>))</span>
<span id="cb35-17"><a href="#cb35-17"></a>))</span></code></pre></div>
<div id="htmlwidget-27" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-27">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"price_USD":[123456.56,132,5650.12],"price_INR":[350,23208.552,1773156.4],"number_FR":[123456.56,132,5650.12],"temp":[22,"NA",31],"percent":[0.9525556,0.5,0.112],"date":["2019-01-02","2019-03-15","2019-09-22"]},"columns":[{"accessor":"price_USD","name":"price_USD","type":"numeric","format":{"cell":{"prefix":"$","digits":2,"separators":true},"aggregated":{"prefix":"$","digits":2,"separators":true}}},{"accessor":"price_INR","name":"price_INR","type":"numeric","format":{"cell":{"separators":true,"currency":"INR","locales":"hi-IN"},"aggregated":{"separators":true,"currency":"INR","locales":"hi-IN"}}},{"accessor":"number_FR","name":"number_FR","type":"numeric","format":{"cell":{"locales":"fr-FR"},"aggregated":{"locales":"fr-FR"}}},{"accessor":"temp","name":"temp","type":"numeric","format":{"cell":{"suffix":" °C"},"aggregated":{"suffix":" °C"}}},{"accessor":"percent","name":"percent","type":"numeric","format":{"cell":{"digits":1,"percent":true},"aggregated":{"digits":1,"percent":true}}},{"accessor":"date","name":"date","type":"Date","format":{"cell":{"date":true,"locales":"en-GB"},"aggregated":{"date":true,"locales":"en-GB"}}}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"e857387a709d11af19d5b735939c2eb9","key":"e857387a709d11af19d5b735939c2eb9"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>详情请参阅<a href="https://docs.microsoft.com/en-us/openspecs/office_standards/ms-oe376/6c085406-a698-4e12-9d4d-c3b0ee3dbc4a">此处</a></p>
<div id="日期格式" class="section level4">
<h4>日期格式</h4>
<div class="sourceCode" id="cb36"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb36-1"><a href="#cb36-1"></a>datetimes &lt;-<span class="st"> </span><span class="kw">as.POSIXct</span>(<span class="kw">c</span>(<span class="st">&quot;2019-01-02 3:22:15&quot;</span>, <span class="st">&quot;2019-03-15 09:15:55&quot;</span>, <span class="st">&quot;2019-09-22 14:20:00&quot;</span>))</span>
<span id="cb36-2"><a href="#cb36-2"></a>data &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</span>
<span id="cb36-3"><a href="#cb36-3"></a>  <span class="dt">datetime =</span> datetimes,</span>
<span id="cb36-4"><a href="#cb36-4"></a>  <span class="dt">date =</span> datetimes,</span>
<span id="cb36-5"><a href="#cb36-5"></a>  <span class="dt">time =</span> datetimes,</span>
<span id="cb36-6"><a href="#cb36-6"></a>  <span class="dt">time_24h =</span> datetimes,</span>
<span id="cb36-7"><a href="#cb36-7"></a>  <span class="dt">datetime_pt_BR =</span> datetimes</span>
<span id="cb36-8"><a href="#cb36-8"></a>)</span>
<span id="cb36-9"><a href="#cb36-9"></a></span>
<span id="cb36-10"><a href="#cb36-10"></a><span class="kw">reactable</span>(data, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb36-11"><a href="#cb36-11"></a>  <span class="dt">datetime =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">datetime =</span> <span class="ot">TRUE</span>)),</span>
<span id="cb36-12"><a href="#cb36-12"></a>  <span class="dt">date =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">date =</span> <span class="ot">TRUE</span>)),</span>
<span id="cb36-13"><a href="#cb36-13"></a>  <span class="dt">time =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">time =</span> <span class="ot">TRUE</span>)),</span>
<span id="cb36-14"><a href="#cb36-14"></a>  <span class="dt">time_24h =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">time =</span> <span class="ot">TRUE</span>, <span class="dt">hour12 =</span> <span class="ot">FALSE</span>)),</span>
<span id="cb36-15"><a href="#cb36-15"></a>  <span class="dt">datetime_pt_BR =</span> <span class="kw">colDef</span>(<span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">datetime =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;pt-BR&quot;</span>))</span>
<span id="cb36-16"><a href="#cb36-16"></a>))</span></code></pre></div>
<div id="htmlwidget-28" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-28">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"datetime":["2019-01-02T03:22:15","2019-03-15T09:15:55","2019-09-22T14:20:00"],"date":["2019-01-02T03:22:15","2019-03-15T09:15:55","2019-09-22T14:20:00"],"time":["2019-01-02T03:22:15","2019-03-15T09:15:55","2019-09-22T14:20:00"],"time_24h":["2019-01-02T03:22:15","2019-03-15T09:15:55","2019-09-22T14:20:00"],"datetime_pt_BR":["2019-01-02T03:22:15","2019-03-15T09:15:55","2019-09-22T14:20:00"]},"columns":[{"accessor":"datetime","name":"datetime","type":"Date","format":{"cell":{"datetime":true},"aggregated":{"datetime":true}}},{"accessor":"date","name":"date","type":"Date","format":{"cell":{"date":true},"aggregated":{"date":true}}},{"accessor":"time","name":"time","type":"Date","format":{"cell":{"time":true},"aggregated":{"time":true}}},{"accessor":"time_24h","name":"time_24h","type":"Date","format":{"cell":{"time":true,"hour12":false},"aggregated":{"time":true,"hour12":false}}},{"accessor":"datetime_pt_BR","name":"datetime_pt_BR","type":"Date","format":{"cell":{"datetime":true,"locales":"pt-BR"},"aggregated":{"datetime":true,"locales":"pt-BR"}}}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"f39d77afafef3d34d7806f0c3e36af7f","key":"f39d77afafef3d34d7806f0c3e36af7f"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="货币格式" class="section level4">
<h4>货币格式</h4>
<div class="sourceCode" id="cb37"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb37-1"><a href="#cb37-1"></a>data &lt;-<span class="st"> </span><span class="kw">data.frame</span>(</span>
<span id="cb37-2"><a href="#cb37-2"></a>  <span class="dt">USD =</span> <span class="kw">c</span>(<span class="fl">12.12</span>, <span class="fl">2141.213</span>, <span class="fl">0.42</span>, <span class="fl">1.55</span>, <span class="dv">34414</span>),</span>
<span id="cb37-3"><a href="#cb37-3"></a>  <span class="dt">EUR =</span> <span class="kw">c</span>(<span class="fl">10.68</span>, <span class="fl">1884.27</span>, <span class="fl">0.37</span>, <span class="fl">1.36</span>, <span class="fl">30284.32</span>),</span>
<span id="cb37-4"><a href="#cb37-4"></a>  <span class="dt">INR =</span> <span class="kw">c</span>(<span class="fl">861.07</span>, <span class="fl">152122.48</span>, <span class="fl">29.84</span>, <span class="dv">110</span>, <span class="fl">2444942.63</span>),</span>
<span id="cb37-5"><a href="#cb37-5"></a>  <span class="dt">JPY =</span> <span class="kw">c</span>(<span class="dv">1280</span>, <span class="dv">226144</span>, <span class="fl">44.36</span>, <span class="dv">164</span>, <span class="fl">3634634.61</span>),</span>
<span id="cb37-6"><a href="#cb37-6"></a>  <span class="dt">MAD =</span> <span class="kw">c</span>(<span class="fl">115.78</span>, <span class="fl">20453.94</span>, <span class="fl">4.01</span>, <span class="dv">15</span>, <span class="fl">328739.73</span>)</span>
<span id="cb37-7"><a href="#cb37-7"></a>)</span>
<span id="cb37-8"><a href="#cb37-8"></a></span>
<span id="cb37-9"><a href="#cb37-9"></a><span class="kw">reactable</span>(data, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb37-10"><a href="#cb37-10"></a>  <span class="dt">USD =</span> <span class="kw">colDef</span>(</span>
<span id="cb37-11"><a href="#cb37-11"></a>    <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;USD&quot;</span>, <span class="dt">separators =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;en-US&quot;</span>)</span>
<span id="cb37-12"><a href="#cb37-12"></a>  ),</span>
<span id="cb37-13"><a href="#cb37-13"></a>  <span class="dt">EUR =</span> <span class="kw">colDef</span>(</span>
<span id="cb37-14"><a href="#cb37-14"></a>    <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;EUR&quot;</span>, <span class="dt">separators =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;de-DE&quot;</span>)</span>
<span id="cb37-15"><a href="#cb37-15"></a>  ),</span>
<span id="cb37-16"><a href="#cb37-16"></a>  <span class="dt">INR =</span> <span class="kw">colDef</span>(</span>
<span id="cb37-17"><a href="#cb37-17"></a>    <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;INR&quot;</span>, <span class="dt">separators =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;hi-IN&quot;</span>)</span>
<span id="cb37-18"><a href="#cb37-18"></a>  ),</span>
<span id="cb37-19"><a href="#cb37-19"></a>  <span class="dt">JPY =</span> <span class="kw">colDef</span>(</span>
<span id="cb37-20"><a href="#cb37-20"></a>    <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;JPY&quot;</span>, <span class="dt">separators =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;ja-JP&quot;</span>)</span>
<span id="cb37-21"><a href="#cb37-21"></a>  ),</span>
<span id="cb37-22"><a href="#cb37-22"></a>  <span class="dt">MAD =</span> <span class="kw">colDef</span>(</span>
<span id="cb37-23"><a href="#cb37-23"></a>    <span class="dt">format =</span> <span class="kw">colFormat</span>(<span class="dt">currency =</span> <span class="st">&quot;MAD&quot;</span>, <span class="dt">separators =</span> <span class="ot">TRUE</span>, <span class="dt">locales =</span> <span class="st">&quot;ar-MA&quot;</span>)</span>
<span id="cb37-24"><a href="#cb37-24"></a>  )</span>
<span id="cb37-25"><a href="#cb37-25"></a>))</span></code></pre></div>
<div id="htmlwidget-29" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-29">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"USD":[12.12,2141.213,0.42,1.55,34414],"EUR":[10.68,1884.27,0.37,1.36,30284.32],"INR":[861.07,152122.48,29.84,110,2444942.63],"JPY":[1280,226144,44.36,164,3634634.61],"MAD":[115.78,20453.94,4.01,15,328739.73]},"columns":[{"accessor":"USD","name":"USD","type":"numeric","format":{"cell":{"separators":true,"currency":"USD","locales":"en-US"},"aggregated":{"separators":true,"currency":"USD","locales":"en-US"}}},{"accessor":"EUR","name":"EUR","type":"numeric","format":{"cell":{"separators":true,"currency":"EUR","locales":"de-DE"},"aggregated":{"separators":true,"currency":"EUR","locales":"de-DE"}}},{"accessor":"INR","name":"INR","type":"numeric","format":{"cell":{"separators":true,"currency":"INR","locales":"hi-IN"},"aggregated":{"separators":true,"currency":"INR","locales":"hi-IN"}}},{"accessor":"JPY","name":"JPY","type":"numeric","format":{"cell":{"separators":true,"currency":"JPY","locales":"ja-JP"},"aggregated":{"separators":true,"currency":"JPY","locales":"ja-JP"}}},{"accessor":"MAD","name":"MAD","type":"numeric","format":{"cell":{"separators":true,"currency":"MAD","locales":"ar-MA"},"aggregated":{"separators":true,"currency":"MAD","locales":"ar-MA"}}}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"f529f4fa21b0f37693219613ee8ef88a","key":"f529f4fa21b0f37693219613ee8ef88a"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="自定义渲染" class="section level3">
<h3>自定义渲染</h3>
<p>如果么有内置格式化函数适用,可以自定义渲染.这部分对我也说也比较复杂,先照搬案例待以后又需要时在学习。</p>
<div id="r渲染" class="section level4">
<h4>R渲染</h4>
<div class="sourceCode" id="cb38"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb38-1"><a href="#cb38-1"></a>data &lt;-<span class="st"> </span>MASS<span class="op">::</span>Cars93[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, <span class="kw">c</span>(<span class="st">&quot;Manufacturer&quot;</span>, <span class="st">&quot;Model&quot;</span>, <span class="st">&quot;Type&quot;</span>, <span class="st">&quot;AirBags&quot;</span>, <span class="st">&quot;Price&quot;</span>)]</span>
<span id="cb38-2"><a href="#cb38-2"></a></span>
<span id="cb38-3"><a href="#cb38-3"></a><span class="kw">reactable</span>(data, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb38-4"><a href="#cb38-4"></a>  <span class="dt">Model =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="cf">function</span>(value, index) {</span>
<span id="cb38-5"><a href="#cb38-5"></a>    <span class="co"># Render as a link</span></span>
<span id="cb38-6"><a href="#cb38-6"></a>    url &lt;-<span class="st"> </span><span class="kw">sprintf</span>(<span class="st">&quot;https://wikipedia.org/wiki/%s_%s&quot;</span>, data[index, <span class="st">&quot;Manufacturer&quot;</span>], value)</span>
<span id="cb38-7"><a href="#cb38-7"></a>    htmltools<span class="op">::</span>tags<span class="op">$</span><span class="kw">a</span>(<span class="dt">href =</span> url, <span class="dt">target =</span> <span class="st">&quot;_blank&quot;</span>, <span class="kw">as.character</span>(value))</span>
<span id="cb38-8"><a href="#cb38-8"></a>  }),</span>
<span id="cb38-9"><a href="#cb38-9"></a>  <span class="dt">AirBags =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="cf">function</span>(value) {</span>
<span id="cb38-10"><a href="#cb38-10"></a>    <span class="co"># Render as ✘ or ✓</span></span>
<span id="cb38-11"><a href="#cb38-11"></a>    <span class="cf">if</span> (value <span class="op">==</span><span class="st"> &quot;None&quot;</span>) <span class="st">&quot;\u2718&quot;</span> <span class="cf">else</span> <span class="st">&quot;\u2713&quot;</span></span>
<span id="cb38-12"><a href="#cb38-12"></a>  }),</span>
<span id="cb38-13"><a href="#cb38-13"></a>  <span class="dt">Price =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="cf">function</span>(value) {</span>
<span id="cb38-14"><a href="#cb38-14"></a>    <span class="co"># Render as currency</span></span>
<span id="cb38-15"><a href="#cb38-15"></a>    <span class="kw">paste0</span>(<span class="st">&quot;$&quot;</span>, <span class="kw">format</span>(value <span class="op">*</span><span class="st"> </span><span class="dv">1000</span>, <span class="dt">big.mark =</span> <span class="st">&quot;,&quot;</span>))</span>
<span id="cb38-16"><a href="#cb38-16"></a>  })</span>
<span id="cb38-17"><a href="#cb38-17"></a>))</span></code></pre></div>
<div id="htmlwidget-30" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-30">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW"],"Model":["Integra","Legend","90","100","535i"],"Type":["Small","Midsize","Compact","Midsize","Midsize"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only"],"Price":[15.9,33.9,29.1,37.7,30]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor","cell":[{"name":"a","attribs":{"href":"https://wikipedia.org/wiki/Acura_Integra","target":"_blank"},"children":["Integra"]},{"name":"a","attribs":{"href":"https://wikipedia.org/wiki/Acura_Legend","target":"_blank"},"children":["Legend"]},{"name":"a","attribs":{"href":"https://wikipedia.org/wiki/Audi_90","target":"_blank"},"children":["90"]},{"name":"a","attribs":{"href":"https://wikipedia.org/wiki/Audi_100","target":"_blank"},"children":["100"]},{"name":"a","attribs":{"href":"https://wikipedia.org/wiki/BMW_535i","target":"_blank"},"children":["535i"]}]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"AirBags","name":"AirBags","type":"factor","cell":["✘","✓","✓","✓","✓"]},{"accessor":"Price","name":"Price","type":"numeric","cell":["$15,900","$33,900","$29,100","$37,700","$30,000"]}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"aea582e3e77a5312a8fa10787ceb7fe7","key":"aea582e3e77a5312a8fa10787ceb7fe7"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="javascript-渲染" class="section level4">
<h4>JavaScript 渲染</h4>
<div class="sourceCode" id="cb39"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb39-1"><a href="#cb39-1"></a>data &lt;-<span class="st"> </span>MASS<span class="op">::</span>Cars93[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, <span class="kw">c</span>(<span class="st">&quot;Manufacturer&quot;</span>, <span class="st">&quot;Model&quot;</span>, <span class="st">&quot;Type&quot;</span>, <span class="st">&quot;AirBags&quot;</span>, <span class="st">&quot;Price&quot;</span>)]</span>
<span id="cb39-2"><a href="#cb39-2"></a></span>
<span id="cb39-3"><a href="#cb39-3"></a><span class="kw">reactable</span>(data, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb39-4"><a href="#cb39-4"></a>  <span class="dt">Model =</span> <span class="kw">colDef</span>(<span class="dt">html =</span> <span class="ot">TRUE</span>, <span class="dt">cell =</span> <span class="kw">JS</span>(<span class="st">&quot;</span></span>
<span id="cb39-5"><a href="#cb39-5"></a><span class="st">    function(cellInfo) {</span></span>
<span id="cb39-6"><a href="#cb39-6"></a><span class="st">      // Render as a link</span></span>
<span id="cb39-7"><a href="#cb39-7"></a><span class="st">      var url = &#39;https://wikipedia.org/wiki/&#39; + cellInfo.row[&#39;Manufacturer&#39;] + &#39;_&#39; + cellInfo.value</span></span>
<span id="cb39-8"><a href="#cb39-8"></a><span class="st">      return &#39;&lt;a href=</span><span class="ch">\&quot;</span><span class="st">&#39; + url + &#39;</span><span class="ch">\&quot;</span><span class="st"> target=</span><span class="ch">\&quot;</span><span class="st">_blank</span><span class="ch">\&quot;</span><span class="st">&gt;&#39; + cellInfo.value + &#39;&lt;/a&gt;&#39;</span></span>
<span id="cb39-9"><a href="#cb39-9"></a><span class="st">    }</span></span>
<span id="cb39-10"><a href="#cb39-10"></a><span class="st">  &quot;</span>)),</span>
<span id="cb39-11"><a href="#cb39-11"></a>  <span class="dt">AirBags =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="kw">JS</span>(<span class="st">&quot;</span></span>
<span id="cb39-12"><a href="#cb39-12"></a><span class="st">    function(cellInfo) {</span></span>
<span id="cb39-13"><a href="#cb39-13"></a><span class="st">      // Render as ✘ or ✓ </span></span>
<span id="cb39-14"><a href="#cb39-14"></a><span class="st">      return cellInfo.value === &#39;None&#39; ? &#39;\u2718&#39; : &#39;\u2713&#39;</span></span>
<span id="cb39-15"><a href="#cb39-15"></a><span class="st">    }</span></span>
<span id="cb39-16"><a href="#cb39-16"></a><span class="st">  &quot;</span>)),</span>
<span id="cb39-17"><a href="#cb39-17"></a>  <span class="dt">Price =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="kw">JS</span>(<span class="st">&quot;</span></span>
<span id="cb39-18"><a href="#cb39-18"></a><span class="st">    function(cellInfo) {</span></span>
<span id="cb39-19"><a href="#cb39-19"></a><span class="st">      // Render as currency</span></span>
<span id="cb39-20"><a href="#cb39-20"></a><span class="st">      return &#39;$&#39; + (cellInfo.value * 1000).toLocaleString()</span></span>
<span id="cb39-21"><a href="#cb39-21"></a><span class="st">    }</span></span>
<span id="cb39-22"><a href="#cb39-22"></a><span class="st">  &quot;</span>))</span>
<span id="cb39-23"><a href="#cb39-23"></a>))</span></code></pre></div>
<div id="htmlwidget-31" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-31">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW"],"Model":["Integra","Legend","90","100","535i"],"Type":["Small","Midsize","Compact","Midsize","Midsize"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only"],"Price":[15.9,33.9,29.1,37.7,30]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor","cell":"\n    function(cellInfo) {\n      // Render as a link\n      var url = 'https://wikipedia.org/wiki/' + cellInfo.row['Manufacturer'] + '_' + cellInfo.value\n      return '<a href=\"' + url + '\" target=\"_blank\">' + cellInfo.value + '<\/a>'\n    }\n  ","html":true},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"AirBags","name":"AirBags","type":"factor","cell":"\n    function(cellInfo) {\n      // Render as ✘ or ✓ \n      return cellInfo.value === 'None' ? '✘' : '✓'\n    }\n  "},{"accessor":"Price","name":"Price","type":"numeric","cell":"\n    function(cellInfo) {\n      // Render as currency\n      return '$' + (cellInfo.value * 1000).toLocaleString()\n    }\n  "}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"10032823866ace6105387e8b8a1ea24d","key":"10032823866ace6105387e8b8a1ea24d"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.1.cell","tag.attribs.columns.3.cell","tag.attribs.columns.4.cell"],"jsHooks":[]}</script>
</div>
<div id="嵌入html小部件" class="section level4">
<h4>嵌入HTML小部件</h4>
<div class="sourceCode" id="cb40"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb40-1"><a href="#cb40-1"></a><span class="kw">library</span>(dplyr)</span>
<span id="cb40-2"><a href="#cb40-2"></a><span class="kw">library</span>(sparkline)</span>
<span id="cb40-3"><a href="#cb40-3"></a></span>
<span id="cb40-4"><a href="#cb40-4"></a>data &lt;-<span class="st"> </span>chickwts <span class="op">%&gt;%</span></span>
<span id="cb40-5"><a href="#cb40-5"></a><span class="st">  </span><span class="kw">group_by</span>(feed) <span class="op">%&gt;%</span></span>
<span id="cb40-6"><a href="#cb40-6"></a><span class="st">  </span><span class="kw">summarise</span>(<span class="dt">weight =</span> <span class="kw">list</span>(weight)) <span class="op">%&gt;%</span></span>
<span id="cb40-7"><a href="#cb40-7"></a><span class="st">  </span><span class="kw">mutate</span>(<span class="dt">boxplot =</span> <span class="ot">NA</span>, <span class="dt">sparkline =</span> <span class="ot">NA</span>)</span>
<span id="cb40-8"><a href="#cb40-8"></a></span>
<span id="cb40-9"><a href="#cb40-9"></a><span class="kw">reactable</span>(data, <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb40-10"><a href="#cb40-10"></a>  <span class="dt">weight =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="cf">function</span>(values) {</span>
<span id="cb40-11"><a href="#cb40-11"></a>    <span class="kw">sparkline</span>(values, <span class="dt">type =</span> <span class="st">&quot;bar&quot;</span>, <span class="dt">chartRangeMin =</span> <span class="dv">0</span>, <span class="dt">chartRangeMax =</span> <span class="kw">max</span>(chickwts<span class="op">$</span>weight))</span>
<span id="cb40-12"><a href="#cb40-12"></a>  }),</span>
<span id="cb40-13"><a href="#cb40-13"></a>  <span class="dt">boxplot =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="cf">function</span>(value, index) {</span>
<span id="cb40-14"><a href="#cb40-14"></a>    <span class="kw">sparkline</span>(data<span class="op">$</span>weight[[index]], <span class="dt">type =</span> <span class="st">&quot;box&quot;</span>)</span>
<span id="cb40-15"><a href="#cb40-15"></a>  }),</span>
<span id="cb40-16"><a href="#cb40-16"></a>  <span class="dt">sparkline =</span> <span class="kw">colDef</span>(<span class="dt">cell =</span> <span class="cf">function</span>(value, index) {</span>
<span id="cb40-17"><a href="#cb40-17"></a>    <span class="kw">sparkline</span>(data<span class="op">$</span>weight[[index]])</span>
<span id="cb40-18"><a href="#cb40-18"></a>  })</span>
<span id="cb40-19"><a href="#cb40-19"></a>))</span></code></pre></div>
<div id="htmlwidget-32" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-32">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"feed":["casein","horsebean","linseed","meatmeal","soybean","sunflower"],"weight":[[368,390,379,260,404,318,352,359,216,222,283,332],[179,160,136,227,217,168,108,124,143,140],[309,229,181,141,260,203,148,169,213,257,244,271],[325,257,303,315,380,153,263,242,206,344,258],[243,230,248,327,329,250,193,271,316,267,199,171,158,248],[423,340,392,339,341,226,320,295,334,322,297,318]],"boxplot":[null,null,null,null,null,null],"sparkline":[null,null,null,null,null,null]},"columns":[{"accessor":"feed","name":"feed","type":"factor"},{"accessor":"weight","name":"weight","type":"list","cell":[{"name":"WidgetContainer","attribs":{"key":"d302ba191dfa99490d9d21d6db306c12"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-9f961539db0432ee347f","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-9f961539db0432ee347f"},"children":["{\"x\":{\"values\":[368,390,379,260,404,318,352,359,216,222,283,332],\"options\":{\"type\":\"bar\",\"chartRangeMin\":0,\"chartRangeMax\":423,\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"c0ecffe2bce4fc2676bd826d92ccd853"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-ea70fcb0e721c723928f","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-ea70fcb0e721c723928f"},"children":["{\"x\":{\"values\":[179,160,136,227,217,168,108,124,143,140],\"options\":{\"type\":\"bar\",\"chartRangeMin\":0,\"chartRangeMax\":423,\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"b34677720af6d879ccf934b06792920d"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-acc3cee8f906df2250a6","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-acc3cee8f906df2250a6"},"children":["{\"x\":{\"values\":[309,229,181,141,260,203,148,169,213,257,244,271],\"options\":{\"type\":\"bar\",\"chartRangeMin\":0,\"chartRangeMax\":423,\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"89032d1f74ec08b6c3c5df89ee40f8ec"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-b226132a60548710249b","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-b226132a60548710249b"},"children":["{\"x\":{\"values\":[325,257,303,315,380,153,263,242,206,344,258],\"options\":{\"type\":\"bar\",\"chartRangeMin\":0,\"chartRangeMax\":423,\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"fd8feccc6bc151b1354443baae45906e"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-87965922168f0fbdcb47","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-87965922168f0fbdcb47"},"children":["{\"x\":{\"values\":[243,230,248,327,329,250,193,271,316,267,199,171,158,248],\"options\":{\"type\":\"bar\",\"chartRangeMin\":0,\"chartRangeMax\":423,\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"ca772d3de85b768a58291315bf710e64"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-427e8671aca0fccf1475","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-427e8671aca0fccf1475"},"children":["{\"x\":{\"values\":[423,340,392,339,341,226,320,295,334,322,297,318],\"options\":{\"type\":\"bar\",\"chartRangeMin\":0,\"chartRangeMax\":423,\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]}]},{"accessor":"boxplot","name":"boxplot","type":"logical","cell":[{"name":"WidgetContainer","attribs":{"key":"63388bbeb6e8a03e30b5cd84739e2bea"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-6d5c07f72b556612d793","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-6d5c07f72b556612d793"},"children":["{\"x\":{\"values\":[368,390,379,260,404,318,352,359,216,222,283,332],\"options\":{\"type\":\"box\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"fda4c493bad19de2c81d8fc026a82f89"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-f3f87dc323cb3f5344d4","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-f3f87dc323cb3f5344d4"},"children":["{\"x\":{\"values\":[179,160,136,227,217,168,108,124,143,140],\"options\":{\"type\":\"box\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"92c8e3fba245fcb94f09a264a760352f"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-31ec9dc50b7660a2fef7","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-31ec9dc50b7660a2fef7"},"children":["{\"x\":{\"values\":[309,229,181,141,260,203,148,169,213,257,244,271],\"options\":{\"type\":\"box\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"b310c00ed47e8b7f22914679e2762e87"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-cee2abeb0eb59400a8e7","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-cee2abeb0eb59400a8e7"},"children":["{\"x\":{\"values\":[325,257,303,315,380,153,263,242,206,344,258],\"options\":{\"type\":\"box\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"1820f6e509b0a7d06fab6a033280084a"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-b5ec349d1c5d39d0d5ab","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-b5ec349d1c5d39d0d5ab"},"children":["{\"x\":{\"values\":[243,230,248,327,329,250,193,271,316,267,199,171,158,248],\"options\":{\"type\":\"box\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"61fe52c2a8093b38aaba7f611e506cf0"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-96fe549ff60d771b5b8a","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-96fe549ff60d771b5b8a"},"children":["{\"x\":{\"values\":[423,340,392,339,341,226,320,295,334,322,297,318],\"options\":{\"type\":\"box\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]}]},{"accessor":"sparkline","name":"sparkline","type":"logical","cell":[{"name":"WidgetContainer","attribs":{"key":"86b0f2deb9972f3d28c9df48b2c6a152"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-ec0a987ac2a213374ab8","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-ec0a987ac2a213374ab8"},"children":["{\"x\":{\"values\":[368,390,379,260,404,318,352,359,216,222,283,332],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"687992c248ec1da94a980337a93ec640"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-a4ea96217c6cecd5e65d","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-a4ea96217c6cecd5e65d"},"children":["{\"x\":{\"values\":[179,160,136,227,217,168,108,124,143,140],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"8b6dcbfe279f1380770aaed51aa3ad05"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-e43d97a6cc24ac33703a","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-e43d97a6cc24ac33703a"},"children":["{\"x\":{\"values\":[309,229,181,141,260,203,148,169,213,257,244,271],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"745a0b49d32d026fb27d15d2ab9a41d1"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-d96403dd9ebabb2deedf","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-d96403dd9ebabb2deedf"},"children":["{\"x\":{\"values\":[325,257,303,315,380,153,263,242,206,344,258],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"34e24d831d52000dedc5ce7ea3842ed5"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-d54476f01feddd376333","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-d54476f01feddd376333"},"children":["{\"x\":{\"values\":[243,230,248,327,329,250,193,271,316,267,199,171,158,248],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]},{"name":"WidgetContainer","attribs":{"key":"5ab53679f35ca1e1aa67180e1ba6214a"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"htmlwidget-a6d199b4de5d9d302c22","className":"sparkline html-widget"},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"htmlwidget-a6d199b4de5d9d302c22"},"children":["{\"x\":{\"values\":[423,340,392,339,341,226,320,295,334,322,297,318],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]}]}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"64300ec08c930773ce356f57e41ec223","key":"64300ec08c930773ce356f57e41ec223"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<p>鉴于渲染部分对于目前我来说太过复杂,直接跳过,以后再学习.</p>
</div>
</div>
<div id="嵌套表格" class="section level3">
<h3>嵌套表格</h3>
<div class="sourceCode" id="cb41"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb41-1"><a href="#cb41-1"></a>data &lt;-<span class="st"> </span><span class="kw">unique</span>(CO2[, <span class="kw">c</span>(<span class="st">&quot;Plant&quot;</span>, <span class="st">&quot;Type&quot;</span>)])</span>
<span id="cb41-2"><a href="#cb41-2"></a></span>
<span id="cb41-3"><a href="#cb41-3"></a><span class="kw">reactable</span>(data, <span class="dt">details =</span> <span class="cf">function</span>(index) {</span>
<span id="cb41-4"><a href="#cb41-4"></a>  plant_data &lt;-<span class="st"> </span>CO2[CO2<span class="op">$</span>Plant <span class="op">==</span><span class="st"> </span>data<span class="op">$</span>Plant[index], ]</span>
<span id="cb41-5"><a href="#cb41-5"></a>  htmltools<span class="op">::</span><span class="kw">div</span>(<span class="dt">style =</span> <span class="st">&quot;padding: 16px&quot;</span>,</span>
<span id="cb41-6"><a href="#cb41-6"></a>    <span class="kw">reactable</span>(plant_data, <span class="dt">outlined =</span> <span class="ot">TRUE</span>)</span>
<span id="cb41-7"><a href="#cb41-7"></a>  )</span>
<span id="cb41-8"><a href="#cb41-8"></a>})</span></code></pre></div>
<div id="htmlwidget-33" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-33">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Plant":["Qn1","Qn2","Qn3","Qc1","Qc2","Qc3","Mn1","Mn2","Mn3","Mc1","Mc2","Mc3"],"Type":["Quebec","Quebec","Quebec","Quebec","Quebec","Quebec","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi"]},"columns":[{"accessor":".details","name":"","type":"NULL","sortable":false,"resizable":false,"filterable":false,"width":45,"align":"center","details":[{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Qn1","Qn1","Qn1","Qn1","Qn1","Qn1","Qn1"],"Type":["Quebec","Quebec","Quebec","Quebec","Quebec","Quebec","Quebec"],"Treatment":["nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[16,30.4,34.8,37.2,35.3,39.2,39.7]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"4c64ffb2023223e9e652a1ecc05d46a7","key":"4c64ffb2023223e9e652a1ecc05d46a7","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Qn2","Qn2","Qn2","Qn2","Qn2","Qn2","Qn2"],"Type":["Quebec","Quebec","Quebec","Quebec","Quebec","Quebec","Quebec"],"Treatment":["nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[13.6,27.3,37.1,41.8,40.6,41.4,44.3]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"fead730b2536a4cb7cf9f4623204da99","key":"fead730b2536a4cb7cf9f4623204da99","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Qn3","Qn3","Qn3","Qn3","Qn3","Qn3","Qn3"],"Type":["Quebec","Quebec","Quebec","Quebec","Quebec","Quebec","Quebec"],"Treatment":["nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[16.2,32.4,40.3,42.1,42.9,43.9,45.5]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"cba40830e94a95cb99aadd427a4e79f3","key":"cba40830e94a95cb99aadd427a4e79f3","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Qc1","Qc1","Qc1","Qc1","Qc1","Qc1","Qc1"],"Type":["Quebec","Quebec","Quebec","Quebec","Quebec","Quebec","Quebec"],"Treatment":["chilled","chilled","chilled","chilled","chilled","chilled","chilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[14.2,24.1,30.3,34.6,32.5,35.4,38.7]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"80013cefb0f7d1ba5e4eb2a2d57f5a7b","key":"80013cefb0f7d1ba5e4eb2a2d57f5a7b","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Qc2","Qc2","Qc2","Qc2","Qc2","Qc2","Qc2"],"Type":["Quebec","Quebec","Quebec","Quebec","Quebec","Quebec","Quebec"],"Treatment":["chilled","chilled","chilled","chilled","chilled","chilled","chilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[9.3,27.3,35,38.8,38.6,37.5,42.4]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"60fdb505352010e41c6fe1c469888350","key":"60fdb505352010e41c6fe1c469888350","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Qc3","Qc3","Qc3","Qc3","Qc3","Qc3","Qc3"],"Type":["Quebec","Quebec","Quebec","Quebec","Quebec","Quebec","Quebec"],"Treatment":["chilled","chilled","chilled","chilled","chilled","chilled","chilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[15.1,21,38.1,34,38.9,39.6,41.4]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"06a589bad729c86ba36ba4d0584c7ca9","key":"06a589bad729c86ba36ba4d0584c7ca9","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Mn1","Mn1","Mn1","Mn1","Mn1","Mn1","Mn1"],"Type":["Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi"],"Treatment":["nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[10.6,19.2,26.2,30,30.9,32.4,35.5]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"5d26b71bf0a21a355a6e27572c15db66","key":"5d26b71bf0a21a355a6e27572c15db66","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Mn2","Mn2","Mn2","Mn2","Mn2","Mn2","Mn2"],"Type":["Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi"],"Treatment":["nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[12,22,30.6,31.8,32.4,31.1,31.5]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"5c9098a5a932e0c120470b6aa92daae6","key":"5c9098a5a932e0c120470b6aa92daae6","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Mn3","Mn3","Mn3","Mn3","Mn3","Mn3","Mn3"],"Type":["Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi"],"Treatment":["nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled","nonchilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[11.3,19.4,25.8,27.9,28.5,28.1,27.8]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"7b233d2e3e3280237fee6fe8606f9737","key":"7b233d2e3e3280237fee6fe8606f9737","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Mc1","Mc1","Mc1","Mc1","Mc1","Mc1","Mc1"],"Type":["Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi"],"Treatment":["chilled","chilled","chilled","chilled","chilled","chilled","chilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[10.5,14.9,18.1,18.9,19.5,22.2,21.9]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"4e183dc7747a714ca4f16b85b2f59449","key":"4e183dc7747a714ca4f16b85b2f59449","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Mc2","Mc2","Mc2","Mc2","Mc2","Mc2","Mc2"],"Type":["Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi"],"Treatment":["chilled","chilled","chilled","chilled","chilled","chilled","chilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[7.7,11.4,12.3,13,12.5,13.7,14.4]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"3c8a32f7e1ba47957ef56eef610fbf99","key":"3c8a32f7e1ba47957ef56eef610fbf99","nested":true},"children":[]}]},{"name":"div","attribs":{"style":{"padding":"16px"}},"children":[{"name":"Reactable","attribs":{"data":{"Plant":["Mc3","Mc3","Mc3","Mc3","Mc3","Mc3","Mc3"],"Type":["Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi","Mississippi"],"Treatment":["chilled","chilled","chilled","chilled","chilled","chilled","chilled"],"conc":[95,175,250,350,500,675,1000],"uptake":[10.6,18,17.9,17.9,17.9,18.9,19.9]},"columns":[{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Treatment","name":"Treatment","type":"factor"},{"accessor":"conc","name":"conc","type":"numeric"},{"accessor":"uptake","name":"uptake","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"6a32ebe8e0f8868007a43d4412697c72","key":"6a32ebe8e0f8868007a43d4412697c72","nested":true},"children":[]}]}]},{"accessor":"Plant","name":"Plant","type":["ordered","factor"]},{"accessor":"Type","name":"Type","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"24cd0a40e54ebcd1e1ec988bf3d79ad4","key":"24cd0a40e54ebcd1e1ec988bf3d79ad4"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="条件样式" class="section level3">
<h3>条件样式</h3>
<div id="cell-样式" class="section level4">
<h4>cell 样式</h4>
<div class="sourceCode" id="cb42"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb42-1"><a href="#cb42-1"></a><span class="kw">reactable</span>(sleep[<span class="dv">1</span><span class="op">:</span><span class="dv">6</span>, ], <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb42-2"><a href="#cb42-2"></a>  <span class="dt">extra =</span> <span class="kw">colDef</span>(<span class="dt">style =</span> <span class="cf">function</span>(value) {</span>
<span id="cb42-3"><a href="#cb42-3"></a>    <span class="cf">if</span> (value <span class="op">&gt;</span><span class="st"> </span><span class="dv">0</span>) {</span>
<span id="cb42-4"><a href="#cb42-4"></a>      color &lt;-<span class="st"> &quot;#008000&quot;</span></span>
<span id="cb42-5"><a href="#cb42-5"></a>    } <span class="cf">else</span> <span class="cf">if</span> (value <span class="op">&lt;</span><span class="st"> </span><span class="dv">0</span>) {</span>
<span id="cb42-6"><a href="#cb42-6"></a>      color &lt;-<span class="st"> &quot;#e00000&quot;</span></span>
<span id="cb42-7"><a href="#cb42-7"></a>    } <span class="cf">else</span> {</span>
<span id="cb42-8"><a href="#cb42-8"></a>      color &lt;-<span class="st"> &quot;#777&quot;</span></span>
<span id="cb42-9"><a href="#cb42-9"></a>    }</span>
<span id="cb42-10"><a href="#cb42-10"></a>    <span class="kw">list</span>(<span class="dt">color =</span> color, <span class="dt">fontWeight =</span> <span class="st">&quot;bold&quot;</span>)</span>
<span id="cb42-11"><a href="#cb42-11"></a>  })</span>
<span id="cb42-12"><a href="#cb42-12"></a>))</span></code></pre></div>
<div id="htmlwidget-34" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-34">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"extra":[0.7,-1.6,-0.2,-1.2,-0.1,3.4],"group":["1","1","1","1","1","1"],"ID":["1","2","3","4","5","6"]},"columns":[{"accessor":"extra","name":"extra","type":"numeric","style":[{"color":"#008000","fontWeight":"bold"},{"color":"#e00000","fontWeight":"bold"},{"color":"#e00000","fontWeight":"bold"},{"color":"#e00000","fontWeight":"bold"},{"color":"#e00000","fontWeight":"bold"},{"color":"#008000","fontWeight":"bold"}]},{"accessor":"group","name":"group","type":"factor"},{"accessor":"ID","name":"ID","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"25e7f1866e22aca0a3b98e61933efe02","key":"25e7f1866e22aca0a3b98e61933efe02"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<div class="sourceCode" id="cb43"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb43-1"><a href="#cb43-1"></a><span class="kw">reactable</span>(sleep[<span class="dv">1</span><span class="op">:</span><span class="dv">6</span>, ], <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb43-2"><a href="#cb43-2"></a>  <span class="dt">extra =</span> <span class="kw">colDef</span>(<span class="dt">style =</span> <span class="kw">JS</span>(<span class="st">&quot;</span></span>
<span id="cb43-3"><a href="#cb43-3"></a><span class="st">    function(rowInfo) {</span></span>
<span id="cb43-4"><a href="#cb43-4"></a><span class="st">      var value = rowInfo.row[&#39;extra&#39;]</span></span>
<span id="cb43-5"><a href="#cb43-5"></a><span class="st">      if (value &gt; 0) {</span></span>
<span id="cb43-6"><a href="#cb43-6"></a><span class="st">        var color = &#39;#008000&#39;</span></span>
<span id="cb43-7"><a href="#cb43-7"></a><span class="st">      } else if (value &lt; 0) {</span></span>
<span id="cb43-8"><a href="#cb43-8"></a><span class="st">        var color = &#39;#e00000&#39;</span></span>
<span id="cb43-9"><a href="#cb43-9"></a><span class="st">      } else {</span></span>
<span id="cb43-10"><a href="#cb43-10"></a><span class="st">        var color = &#39;#777&#39;</span></span>
<span id="cb43-11"><a href="#cb43-11"></a><span class="st">      }</span></span>
<span id="cb43-12"><a href="#cb43-12"></a><span class="st">      return { color: color, fontWeight: &#39;bold&#39; }</span></span>
<span id="cb43-13"><a href="#cb43-13"></a><span class="st">    }</span></span>
<span id="cb43-14"><a href="#cb43-14"></a><span class="st">  &quot;</span>))</span>
<span id="cb43-15"><a href="#cb43-15"></a>))</span></code></pre></div>
<div id="htmlwidget-35" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-35">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"extra":[0.7,-1.6,-0.2,-1.2,-0.1,3.4],"group":["1","1","1","1","1","1"],"ID":["1","2","3","4","5","6"]},"columns":[{"accessor":"extra","name":"extra","type":"numeric","style":"\n    function(rowInfo) {\n      var value = rowInfo.row['extra']\n      if (value > 0) {\n        var color = '#008000'\n      } else if (value < 0) {\n        var color = '#e00000'\n      } else {\n        var color = '#777'\n      }\n      return { color: color, fontWeight: 'bold' }\n    }\n  "},{"accessor":"group","name":"group","type":"factor"},{"accessor":"ID","name":"ID","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"f858b770120ab22e22079f2eaaa17172","key":"f858b770120ab22e22079f2eaaa17172"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.0.style"],"jsHooks":[]}</script>
</div>
<div id="行样式" class="section level4">
<h4>行样式</h4>
<div class="sourceCode" id="cb44"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb44-1"><a href="#cb44-1"></a><span class="kw">reactable</span>(sleep[<span class="dv">1</span><span class="op">:</span><span class="dv">6</span>, ], </span>
<span id="cb44-2"><a href="#cb44-2"></a>  <span class="dt">rowStyle =</span> <span class="cf">function</span>(index) {</span>
<span id="cb44-3"><a href="#cb44-3"></a>    <span class="cf">if</span> (sleep[index, <span class="st">&quot;extra&quot;</span>] <span class="op">&lt;</span><span class="st"> </span><span class="dv">-1</span>) {</span>
<span id="cb44-4"><a href="#cb44-4"></a>      <span class="kw">list</span>(<span class="dt">background =</span> <span class="st">&quot;rgba(0, 0, 0, 0.05)&quot;</span>)</span>
<span id="cb44-5"><a href="#cb44-5"></a>    }</span>
<span id="cb44-6"><a href="#cb44-6"></a>    </span>
<span id="cb44-7"><a href="#cb44-7"></a>  },</span>
<span id="cb44-8"><a href="#cb44-8"></a>  <span class="dt">rowClass =</span> <span class="cf">function</span>(index) {</span>
<span id="cb44-9"><a href="#cb44-9"></a>    <span class="cf">if</span> (sleep[index, <span class="st">&quot;extra&quot;</span>] <span class="op">&lt;</span><span class="st"> </span><span class="dv">-1</span>) {</span>
<span id="cb44-10"><a href="#cb44-10"></a>      <span class="st">&quot;bold&quot;</span></span>
<span id="cb44-11"><a href="#cb44-11"></a>    }</span>
<span id="cb44-12"><a href="#cb44-12"></a>  }</span>
<span id="cb44-13"><a href="#cb44-13"></a>)</span></code></pre></div>
<div id="htmlwidget-36" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-36">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"extra":[0.7,-1.6,-0.2,-1.2,-0.1,3.4],"group":["1","1","1","1","1","1"],"ID":["1","2","3","4","5","6"]},"columns":[{"accessor":"extra","name":"extra","type":"numeric"},{"accessor":"group","name":"group","type":"factor"},{"accessor":"ID","name":"ID","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"rowClassName":[null,"bold",null,"bold",null,null],"rowStyle":[null,{"background":"rgba(0, 0, 0, 0.05)"},null,{"background":"rgba(0, 0, 0, 0.05)"},null,null],"dataKey":"4370f594367f1979b07e8ecb11ae88e3","key":"4370f594367f1979b07e8ecb11ae88e3"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<div class="sourceCode" id="cb45"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb45-1"><a href="#cb45-1"></a><span class="kw">reactable</span>(sleep[<span class="dv">1</span><span class="op">:</span><span class="dv">6</span>, ],</span>
<span id="cb45-2"><a href="#cb45-2"></a>  <span class="dt">rowStyle =</span> <span class="kw">JS</span>(<span class="st">&quot;function(rowInfo) {</span></span>
<span id="cb45-3"><a href="#cb45-3"></a><span class="st">    if (rowInfo.row[&#39;extra&#39;] &lt; -1) {</span></span>
<span id="cb45-4"><a href="#cb45-4"></a><span class="st">      return { background: &#39;rgba(0, 0, 0, 0.05)&#39; }</span></span>
<span id="cb45-5"><a href="#cb45-5"></a><span class="st">    }</span></span>
<span id="cb45-6"><a href="#cb45-6"></a><span class="st">  }&quot;</span>),</span>
<span id="cb45-7"><a href="#cb45-7"></a>  <span class="dt">rowClass =</span> <span class="kw">JS</span>(<span class="st">&quot;function(rowInfo) {</span></span>
<span id="cb45-8"><a href="#cb45-8"></a><span class="st">    if (rowInfo.row[&#39;extra&#39;] &lt; -1) {</span></span>
<span id="cb45-9"><a href="#cb45-9"></a><span class="st">      return &#39;bold&#39;</span></span>
<span id="cb45-10"><a href="#cb45-10"></a><span class="st">    }</span></span>
<span id="cb45-11"><a href="#cb45-11"></a><span class="st">  }&quot;</span>)</span>
<span id="cb45-12"><a href="#cb45-12"></a>)</span></code></pre></div>
<div id="htmlwidget-37" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-37">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"extra":[0.7,-1.6,-0.2,-1.2,-0.1,3.4],"group":["1","1","1","1","1","1"],"ID":["1","2","3","4","5","6"]},"columns":[{"accessor":"extra","name":"extra","type":"numeric"},{"accessor":"group","name":"group","type":"factor"},{"accessor":"ID","name":"ID","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"rowClassName":"function(rowInfo) {\n    if (rowInfo.row['extra'] < -1) {\n      return 'bold'\n    }\n  }","rowStyle":"function(rowInfo) {\n    if (rowInfo.row['extra'] < -1) {\n      return { background: 'rgba(0, 0, 0, 0.05)' }\n    }\n  }","dataKey":"4370f594367f1979b07e8ecb11ae88e3","key":"4370f594367f1979b07e8ecb11ae88e3"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.rowClassName","tag.attribs.rowStyle"],"jsHooks":[]}</script>
</div>
<div id="表样式" class="section level4">
<h4>表样式</h4>
<div id="highlight-rows-on-hover" class="section level6">
<h6>Highlight rows on hover</h6>
<p>选中高亮</p>
<div class="sourceCode" id="cb46"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb46-1"><a href="#cb46-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">highlight =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-38" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-38">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"highlight":true,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="bordered" class="section level6">
<h6>Bordered</h6>
<p>边框线</p>
<div class="sourceCode" id="cb47"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb47-1"><a href="#cb47-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">bordered =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-39" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-39">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"bordered":true,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="borderless" class="section level5">
<h5>Borderless</h5>
<p>无边界线</p>
<div class="sourceCode" id="cb48"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb48-1"><a href="#cb48-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">borderless =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-40" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-40">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"borderless":true,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="outlined" class="section level5">
<h5>outlined</h5>
<p>简约</p>
<div class="sourceCode" id="cb49"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb49-1"><a href="#cb49-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">outlined =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-41" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-41">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"outlined":true,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="striped" class="section level5">
<h5>striped</h5>
<p>条纹带状</p>
<div class="sourceCode" id="cb50"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb50-1"><a href="#cb50-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">striped =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-42" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-42">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"striped":true,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="compact" class="section level5">
<h5>Compact</h5>
<p>紧凑</p>
<div class="sourceCode" id="cb51"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb51-1"><a href="#cb51-1"></a><span class="kw">reactable</span>(iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">compact =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-43" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-43">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"compact":true,"dataKey":"d3fca8572c237955c00f31df9646b388","key":"d3fca8572c237955c00f31df9646b388"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="no-text-wrapping" class="section level5">
<h5>No text wrapping</h5>
<p>无文字换行</p>
<div class="sourceCode" id="cb52"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb52-1"><a href="#cb52-1"></a>data &lt;-<span class="st"> </span><span class="kw">aggregate</span>(. <span class="op">~</span><span class="st"> </span>Species, iris, toString)</span>
<span id="cb52-2"><a href="#cb52-2"></a></span>
<span id="cb52-3"><a href="#cb52-3"></a><span class="kw">reactable</span>(</span>
<span id="cb52-4"><a href="#cb52-4"></a>  data,</span>
<span id="cb52-5"><a href="#cb52-5"></a>  <span class="dt">wrap =</span> <span class="ot">FALSE</span>,</span>
<span id="cb52-6"><a href="#cb52-6"></a>  <span class="dt">resizable =</span> <span class="ot">TRUE</span>,</span>
<span id="cb52-7"><a href="#cb52-7"></a>  <span class="dt">bordered =</span> <span class="ot">TRUE</span>,</span>
<span id="cb52-8"><a href="#cb52-8"></a>  <span class="dt">columns =</span> <span class="kw">list</span>(<span class="dt">Petal.Length =</span> <span class="kw">colDef</span>(<span class="dt">name =</span> <span class="st">&quot;Petal Length (cm)&quot;</span>, <span class="dt">width =</span> <span class="dv">100</span>))</span>
<span id="cb52-9"><a href="#cb52-9"></a>)</span></code></pre></div>
<div id="htmlwidget-44" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-44">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Species":["setosa","versicolor","virginica"],"Sepal.Length":["5.1, 4.9, 4.7, 4.6, 5, 5.4, 4.6, 5, 4.4, 4.9, 5.4, 4.8, 4.8, 4.3, 5.8, 5.7, 5.4, 5.1, 5.7, 5.1, 5.4, 5.1, 4.6, 5.1, 4.8, 5, 5, 5.2, 5.2, 4.7, 4.8, 5.4, 5.2, 5.5, 4.9, 5, 5.5, 4.9, 4.4, 5.1, 5, 4.5, 4.4, 5, 5.1, 4.8, 5.1, 4.6, 5.3, 5","7, 6.4, 6.9, 5.5, 6.5, 5.7, 6.3, 4.9, 6.6, 5.2, 5, 5.9, 6, 6.1, 5.6, 6.7, 5.6, 5.8, 6.2, 5.6, 5.9, 6.1, 6.3, 6.1, 6.4, 6.6, 6.8, 6.7, 6, 5.7, 5.5, 5.5, 5.8, 6, 5.4, 6, 6.7, 6.3, 5.6, 5.5, 5.5, 6.1, 5.8, 5, 5.6, 5.7, 5.7, 6.2, 5.1, 5.7","6.3, 5.8, 7.1, 6.3, 6.5, 7.6, 4.9, 7.3, 6.7, 7.2, 6.5, 6.4, 6.8, 5.7, 5.8, 6.4, 6.5, 7.7, 7.7, 6, 6.9, 5.6, 7.7, 6.3, 6.7, 7.2, 6.2, 6.1, 6.4, 7.2, 7.4, 7.9, 6.4, 6.3, 6.1, 7.7, 6.3, 6.4, 6, 6.9, 6.7, 6.9, 5.8, 6.8, 6.7, 6.7, 6.3, 6.5, 6.2, 5.9"],"Sepal.Width":["3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 3.8, 3.2, 3.7, 3.3","3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8","3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3"],"Petal.Length":["1.4, 1.4, 1.3, 1.5, 1.4, 1.7, 1.4, 1.5, 1.4, 1.5, 1.5, 1.6, 1.4, 1.1, 1.2, 1.5, 1.3, 1.4, 1.7, 1.5, 1.7, 1.5, 1, 1.7, 1.9, 1.6, 1.6, 1.5, 1.4, 1.6, 1.6, 1.5, 1.5, 1.4, 1.5, 1.2, 1.3, 1.4, 1.3, 1.5, 1.3, 1.3, 1.3, 1.6, 1.9, 1.4, 1.6, 1.4, 1.5, 1.4","4.7, 4.5, 4.9, 4, 4.6, 4.5, 4.7, 3.3, 4.6, 3.9, 3.5, 4.2, 4, 4.7, 3.6, 4.4, 4.5, 4.1, 4.5, 3.9, 4.8, 4, 4.9, 4.7, 4.3, 4.4, 4.8, 5, 4.5, 3.5, 3.8, 3.7, 3.9, 5.1, 4.5, 4.5, 4.7, 4.4, 4.1, 4, 4.4, 4.6, 4, 3.3, 4.2, 4.2, 4.2, 4.3, 3, 4.1","6, 5.1, 5.9, 5.6, 5.8, 6.6, 4.5, 6.3, 5.8, 6.1, 5.1, 5.3, 5.5, 5, 5.1, 5.3, 5.5, 6.7, 6.9, 5, 5.7, 4.9, 6.7, 4.9, 5.7, 6, 4.8, 4.9, 5.6, 5.8, 6.1, 6.4, 5.6, 5.1, 5.6, 6.1, 5.6, 5.5, 4.8, 5.4, 5.6, 5.1, 5.1, 5.9, 5.7, 5.2, 5, 5.2, 5.4, 5.1"],"Petal.Width":["0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2","1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1, 1.3, 1.4, 1, 1.5, 1, 1.4, 1.3, 1.4, 1.5, 1, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1, 1.1, 1, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3","2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2, 1.9, 2.1, 2, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2, 2, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2, 2.3, 1.8"]},"columns":[{"accessor":"Species","name":"Species","type":"factor"},{"accessor":"Sepal.Length","name":"Sepal.Length","type":"character"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"character"},{"accessor":"Petal.Length","name":"Petal Length (cm)","type":"character","width":100},{"accessor":"Petal.Width","name":"Petal.Width","type":"character"}],"resizable":true,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"bordered":true,"nowrap":true,"dataKey":"6ac0e4f9fae350f2a9884603feb65d30","key":"6ac0e4f9fae350f2a9884603feb65d30"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
</div>
<div id="主题" class="section level3">
<h3>主题</h3>
<p>主题是一种强大有效的方式来定制表样式,该样式可以在表之间重复使用。可以设置主题变量更改默认样式,也可以将自己的自定义CSS添加到表特定元素.</p>
<p>要应用主题,可以通过<code>reactableTheme()</code>到<code>theme</code>:</p>
<div class="sourceCode" id="cb53"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb53-1"><a href="#cb53-1"></a><span class="kw">reactable</span>(</span>
<span id="cb53-2"><a href="#cb53-2"></a>  iris[<span class="dv">1</span><span class="op">:</span><span class="dv">30</span>, ],</span>
<span id="cb53-3"><a href="#cb53-3"></a>  <span class="dt">searchable =</span> <span class="ot">TRUE</span>,</span>
<span id="cb53-4"><a href="#cb53-4"></a>  <span class="dt">striped =</span> <span class="ot">TRUE</span>,</span>
<span id="cb53-5"><a href="#cb53-5"></a>  <span class="dt">highlight =</span> <span class="ot">TRUE</span>,</span>
<span id="cb53-6"><a href="#cb53-6"></a>  <span class="dt">bordered =</span> <span class="ot">TRUE</span>,</span>
<span id="cb53-7"><a href="#cb53-7"></a>  <span class="dt">theme =</span> <span class="kw">reactableTheme</span>(</span>
<span id="cb53-8"><a href="#cb53-8"></a>    <span class="dt">borderColor =</span> <span class="st">&quot;#dfe2e5&quot;</span>,</span>
<span id="cb53-9"><a href="#cb53-9"></a>    <span class="dt">stripedColor =</span> <span class="st">&quot;#f6f8fa&quot;</span>,</span>
<span id="cb53-10"><a href="#cb53-10"></a>    <span class="dt">highlightColor =</span> <span class="st">&quot;#f0f5f9&quot;</span>,</span>
<span id="cb53-11"><a href="#cb53-11"></a>    <span class="dt">cellPadding =</span> <span class="st">&quot;8px 12px&quot;</span>,</span>
<span id="cb53-12"><a href="#cb53-12"></a>    <span class="dt">style =</span> <span class="kw">list</span>(<span class="dt">fontFamily =</span> <span class="st">&quot;-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif&quot;</span>),</span>
<span id="cb53-13"><a href="#cb53-13"></a>    <span class="dt">searchInputStyle =</span> <span class="kw">list</span>(<span class="dt">width =</span> <span class="st">&quot;100%&quot;</span>)</span>
<span id="cb53-14"><a href="#cb53-14"></a>  )</span>
<span id="cb53-15"><a href="#cb53-15"></a>)</span></code></pre></div>
<div id="htmlwidget-45" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-45">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"highlight":true,"bordered":true,"striped":true,"theme":{"borderColor":"#dfe2e5","stripedColor":"#f6f8fa","highlightColor":"#f0f5f9","cellPadding":"8px 12px","style":{"fontFamily":"-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"},"searchInputStyle":{"width":"100%"}},"dataKey":"79f3a1e5e7ef5502185f27bba71a8b17","key":"79f3a1e5e7ef5502185f27bba71a8b17"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
<div id="全局主题" class="section level4">
<h4>全局主题</h4>
<p>使用option项<code>reactable.theme</code>设置默认主题；</p>
<div class="sourceCode" id="cb54"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb54-1"><a href="#cb54-1"></a><span class="kw">options</span>(<span class="dt">reactable.theme =</span> <span class="kw">reactableTheme</span>(</span>
<span id="cb54-2"><a href="#cb54-2"></a>  <span class="dt">color =</span> <span class="st">&quot;hsl(233, 9%, 87%)&quot;</span>,</span>
<span id="cb54-3"><a href="#cb54-3"></a>  <span class="dt">backgroundColor =</span> <span class="st">&quot;hsl(233, 9%, 19%)&quot;</span>,</span>
<span id="cb54-4"><a href="#cb54-4"></a>  <span class="dt">borderColor =</span> <span class="st">&quot;hsl(233, 9%, 22%)&quot;</span>,</span>
<span id="cb54-5"><a href="#cb54-5"></a>  <span class="dt">stripedColor =</span> <span class="st">&quot;hsl(233, 12%, 22%)&quot;</span>,</span>
<span id="cb54-6"><a href="#cb54-6"></a>  <span class="dt">highlightColor =</span> <span class="st">&quot;hsl(233, 12%, 24%)&quot;</span>,</span>
<span id="cb54-7"><a href="#cb54-7"></a>  <span class="dt">inputStyle =</span> <span class="kw">list</span>(<span class="dt">backgroundColor =</span> <span class="st">&quot;hsl(233, 9%, 25%)&quot;</span>),</span>
<span id="cb54-8"><a href="#cb54-8"></a>  <span class="dt">selectStyle =</span> <span class="kw">list</span>(<span class="dt">backgroundColor =</span> <span class="st">&quot;hsl(233, 9%, 25%)&quot;</span>),</span>
<span id="cb54-9"><a href="#cb54-9"></a>  <span class="dt">pageButtonHoverStyle =</span> <span class="kw">list</span>(<span class="dt">backgroundColor =</span> <span class="st">&quot;hsl(233, 9%, 25%)&quot;</span>),</span>
<span id="cb54-10"><a href="#cb54-10"></a>  <span class="dt">pageButtonActiveStyle =</span> <span class="kw">list</span>(<span class="dt">backgroundColor =</span> <span class="st">&quot;hsl(233, 9%, 28%)&quot;</span>)</span>
<span id="cb54-11"><a href="#cb54-11"></a>))</span>
<span id="cb54-12"><a href="#cb54-12"></a></span>
<span id="cb54-13"><a href="#cb54-13"></a><span class="kw">reactable</span>(</span>
<span id="cb54-14"><a href="#cb54-14"></a>  iris[<span class="dv">1</span><span class="op">:</span><span class="dv">30</span>, ],</span>
<span id="cb54-15"><a href="#cb54-15"></a>  <span class="dt">filterable =</span> <span class="ot">TRUE</span>,</span>
<span id="cb54-16"><a href="#cb54-16"></a>  <span class="dt">showPageSizeOptions =</span> <span class="ot">TRUE</span>,</span>
<span id="cb54-17"><a href="#cb54-17"></a>  <span class="dt">striped =</span> <span class="ot">TRUE</span>,</span>
<span id="cb54-18"><a href="#cb54-18"></a>  <span class="dt">highlight =</span> <span class="ot">TRUE</span>,</span>
<span id="cb54-19"><a href="#cb54-19"></a>  <span class="dt">details =</span> <span class="cf">function</span>(index) <span class="kw">paste</span>(<span class="st">&quot;Details for row&quot;</span>, index)</span>
<span id="cb54-20"><a href="#cb54-20"></a>)</span></code></pre></div>
<div id="htmlwidget-46" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-46">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":".details","name":"","type":"NULL","sortable":false,"resizable":false,"filterable":false,"width":45,"align":"center","details":["Details for row 1","Details for row 2","Details for row 3","Details for row 4","Details for row 5","Details for row 6","Details for row 7","Details for row 8","Details for row 9","Details for row 10","Details for row 11","Details for row 12","Details for row 13","Details for row 14","Details for row 15","Details for row 16","Details for row 17","Details for row 18","Details for row 19","Details for row 20","Details for row 21","Details for row 22","Details for row 23","Details for row 24","Details for row 25","Details for row 26","Details for row 27","Details for row 28","Details for row 29","Details for row 30"]},{"accessor":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"accessor":"Petal.Length","name":"Petal.Length","type":"numeric"},{"accessor":"Petal.Width","name":"Petal.Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"filterable":true,"defaultPageSize":10,"showPageSizeOptions":true,"pageSizeOptions":[10,25,50,100],"paginationType":"numbers","showPageInfo":true,"minRows":1,"highlight":true,"striped":true,"theme":{"color":"hsl(233, 9%, 87%)","backgroundColor":"hsl(233, 9%, 19%)","borderColor":"hsl(233, 9%, 22%)","stripedColor":"hsl(233, 12%, 22%)","highlightColor":"hsl(233, 12%, 24%)","inputStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"selectStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonHoverStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonActiveStyle":{"backgroundColor":"hsl(233, 9%, 28%)"}},"dataKey":"0e9b5361b40a84e9a8176f07af393d64","key":"0e9b5361b40a84e9a8176f07af393d64"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="列分组" class="section level3">
<h3>列分组</h3>
<p>通过定义列表作为<code>colGroup()</code>参数定义<code>columnGroups</code>:</p>
<div class="sourceCode" id="cb55"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb55-1"><a href="#cb55-1"></a><span class="kw">reactable</span>(</span>
<span id="cb55-2"><a href="#cb55-2"></a>  iris[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ],</span>
<span id="cb55-3"><a href="#cb55-3"></a>  <span class="dt">columns =</span> <span class="kw">list</span>(</span>
<span id="cb55-4"><a href="#cb55-4"></a>    <span class="dt">Sepal.Length =</span> <span class="kw">colDef</span>(<span class="dt">name =</span> <span class="st">&quot;Length&quot;</span>),</span>
<span id="cb55-5"><a href="#cb55-5"></a>    <span class="dt">Sepal.Width =</span> <span class="kw">colDef</span>(<span class="dt">name =</span> <span class="st">&quot;Width&quot;</span>),</span>
<span id="cb55-6"><a href="#cb55-6"></a>    <span class="dt">Petal.Length =</span> <span class="kw">colDef</span>(<span class="dt">name =</span> <span class="st">&quot;Length&quot;</span>),</span>
<span id="cb55-7"><a href="#cb55-7"></a>    <span class="dt">Petal.Width =</span> <span class="kw">colDef</span>(<span class="dt">name =</span> <span class="st">&quot;Width&quot;</span>)</span>
<span id="cb55-8"><a href="#cb55-8"></a>  ),</span>
<span id="cb55-9"><a href="#cb55-9"></a>  <span class="dt">columnGroups =</span> <span class="kw">list</span>(</span>
<span id="cb55-10"><a href="#cb55-10"></a>    <span class="kw">colGroup</span>(<span class="dt">name =</span> <span class="st">&quot;Sepal&quot;</span>, <span class="dt">columns =</span> <span class="kw">c</span>(<span class="st">&quot;Sepal.Length&quot;</span>, <span class="st">&quot;Sepal.Width&quot;</span>)),</span>
<span id="cb55-11"><a href="#cb55-11"></a>    <span class="kw">colGroup</span>(<span class="dt">name =</span> <span class="st">&quot;Petal&quot;</span>, <span class="dt">columns =</span> <span class="kw">c</span>(<span class="st">&quot;Petal.Length&quot;</span>, <span class="st">&quot;Petal.Width&quot;</span>))</span>
<span id="cb55-12"><a href="#cb55-12"></a>  )</span>
<span id="cb55-13"><a href="#cb55-13"></a>)</span></code></pre></div>
<div id="htmlwidget-47" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-47">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5],"Sepal.Width":[3.5,3,3.2,3.1,3.6],"Petal.Length":[1.4,1.4,1.3,1.5,1.4],"Petal.Width":[0.2,0.2,0.2,0.2,0.2],"Species":["setosa","setosa","setosa","setosa","setosa"]},"columns":[{"accessor":"Sepal.Length","name":"Length","type":"numeric"},{"accessor":"Sepal.Width","name":"Width","type":"numeric"},{"accessor":"Petal.Length","name":"Length","type":"numeric"},{"accessor":"Petal.Width","name":"Width","type":"numeric"},{"accessor":"Species","name":"Species","type":"factor"}],"columnGroups":[{"name":"Sepal","columns":["Sepal.Length","Sepal.Width"]},{"name":"Petal","columns":["Petal.Length","Petal.Width"]}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"theme":{"color":"hsl(233, 9%, 87%)","backgroundColor":"hsl(233, 9%, 19%)","borderColor":"hsl(233, 9%, 22%)","stripedColor":"hsl(233, 12%, 22%)","highlightColor":"hsl(233, 12%, 24%)","inputStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"selectStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonHoverStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonActiveStyle":{"backgroundColor":"hsl(233, 9%, 28%)"}},"dataKey":"e7efb910ac3a996578f95d764d9d7f00","key":"e7efb910ac3a996578f95d764d9d7f00"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="列大小调整" class="section level3">
<h3>列大小调整</h3>
<p>通过设定<code>resizable</code>为<code>TRUE</code>调整列大小:</p>
<div class="sourceCode" id="cb56"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb56-1"><a href="#cb56-1"></a><span class="kw">reactable</span>(MASS<span class="op">::</span>Cars93[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ], <span class="dt">resizable =</span> <span class="ot">TRUE</span>, <span class="dt">wrap =</span> <span class="ot">FALSE</span>, <span class="dt">bordered =</span> <span class="ot">TRUE</span>)</span></code></pre></div>
<div id="htmlwidget-48" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-48">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW"],"Model":["Integra","Legend","90","100","535i"],"Type":["Small","Midsize","Compact","Midsize","Midsize"],"Min.Price":[12.9,29.2,25.9,30.8,23.7],"Price":[15.9,33.9,29.1,37.7,30],"Max.Price":[18.8,38.7,32.3,44.6,36.2],"MPG.city":[25,18,20,19,22],"MPG.highway":[31,25,26,26,30],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only"],"DriveTrain":["Front","Front","Front","Front","Rear"],"Cylinders":["4","6","6","6","4"],"EngineSize":[1.8,3.2,2.8,2.8,3.5],"Horsepower":[140,200,172,172,208],"RPM":[6300,5500,5500,5500,5700],"Rev.per.mile":[2890,2335,2280,2535,2545],"Man.trans.avail":["Yes","Yes","Yes","Yes","Yes"],"Fuel.tank.capacity":[13.2,18,16.9,21.1,21.1],"Passengers":[5,5,5,6,4],"Length":[177,195,180,193,186],"Wheelbase":[102,115,102,106,109],"Width":[68,71,67,70,69],"Turn.circle":[37,38,37,37,39],"Rear.seat.room":[26.5,30,28,31,27],"Luggage.room":[11,15,14,17,13],"Weight":[2705,3560,3375,3405,3640],"Origin":["non-USA","non-USA","non-USA","non-USA","non-USA"],"Make":["Acura Integra","Acura Legend","Audi 90","Audi 100","BMW 535i"]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor"},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Min.Price","name":"Min.Price","type":"numeric"},{"accessor":"Price","name":"Price","type":"numeric"},{"accessor":"Max.Price","name":"Max.Price","type":"numeric"},{"accessor":"MPG.city","name":"MPG.city","type":"numeric"},{"accessor":"MPG.highway","name":"MPG.highway","type":"numeric"},{"accessor":"AirBags","name":"AirBags","type":"factor"},{"accessor":"DriveTrain","name":"DriveTrain","type":"factor"},{"accessor":"Cylinders","name":"Cylinders","type":"factor"},{"accessor":"EngineSize","name":"EngineSize","type":"numeric"},{"accessor":"Horsepower","name":"Horsepower","type":"numeric"},{"accessor":"RPM","name":"RPM","type":"numeric"},{"accessor":"Rev.per.mile","name":"Rev.per.mile","type":"numeric"},{"accessor":"Man.trans.avail","name":"Man.trans.avail","type":"factor"},{"accessor":"Fuel.tank.capacity","name":"Fuel.tank.capacity","type":"numeric"},{"accessor":"Passengers","name":"Passengers","type":"numeric"},{"accessor":"Length","name":"Length","type":"numeric"},{"accessor":"Wheelbase","name":"Wheelbase","type":"numeric"},{"accessor":"Width","name":"Width","type":"numeric"},{"accessor":"Turn.circle","name":"Turn.circle","type":"numeric"},{"accessor":"Rear.seat.room","name":"Rear.seat.room","type":"numeric"},{"accessor":"Luggage.room","name":"Luggage.room","type":"numeric"},{"accessor":"Weight","name":"Weight","type":"numeric"},{"accessor":"Origin","name":"Origin","type":"factor"},{"accessor":"Make","name":"Make","type":"factor"}],"resizable":true,"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"bordered":true,"nowrap":true,"theme":{"color":"hsl(233, 9%, 87%)","backgroundColor":"hsl(233, 9%, 19%)","borderColor":"hsl(233, 9%, 22%)","stripedColor":"hsl(233, 12%, 22%)","highlightColor":"hsl(233, 12%, 24%)","inputStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"selectStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonHoverStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonActiveStyle":{"backgroundColor":"hsl(233, 9%, 28%)"}},"dataKey":"cd6481f17ddfe48a1b5081c23208f330","key":"cd6481f17ddfe48a1b5081c23208f330"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="跨小部件交互" class="section level3">
<h3>跨小部件交互</h3>
<div class="sourceCode" id="cb57"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb57-1"><a href="#cb57-1"></a><span class="kw">library</span>(crosstalk)</span>
<span id="cb57-2"><a href="#cb57-2"></a></span>
<span id="cb57-3"><a href="#cb57-3"></a>cars &lt;-<span class="st"> </span>MASS<span class="op">::</span>Cars93[<span class="dv">1</span><span class="op">:</span><span class="dv">20</span>, <span class="kw">c</span>(<span class="st">&quot;Manufacturer&quot;</span>, <span class="st">&quot;Model&quot;</span>, <span class="st">&quot;Type&quot;</span>, <span class="st">&quot;Price&quot;</span>)]</span>
<span id="cb57-4"><a href="#cb57-4"></a>data &lt;-<span class="st"> </span>SharedData<span class="op">$</span><span class="kw">new</span>(cars)</span>
<span id="cb57-5"><a href="#cb57-5"></a></span>
<span id="cb57-6"><a href="#cb57-6"></a><span class="kw">bscols</span>(</span>
<span id="cb57-7"><a href="#cb57-7"></a>  <span class="dt">widths =</span> <span class="kw">c</span>(<span class="dv">3</span>, <span class="dv">9</span>),</span>
<span id="cb57-8"><a href="#cb57-8"></a>  <span class="kw">list</span>(</span>
<span id="cb57-9"><a href="#cb57-9"></a>    <span class="kw">filter_checkbox</span>(<span class="st">&quot;type&quot;</span>, <span class="st">&quot;Type&quot;</span>, data, <span class="op">~</span>Type),</span>
<span id="cb57-10"><a href="#cb57-10"></a>    <span class="kw">filter_slider</span>(<span class="st">&quot;price&quot;</span>, <span class="st">&quot;Price&quot;</span>, data, <span class="op">~</span>Price, <span class="dt">width =</span> <span class="st">&quot;100%&quot;</span>),</span>
<span id="cb57-11"><a href="#cb57-11"></a>    <span class="kw">filter_select</span>(<span class="st">&quot;mfr&quot;</span>, <span class="st">&quot;Manufacturer&quot;</span>, data, <span class="op">~</span>Manufacturer)</span>
<span id="cb57-12"><a href="#cb57-12"></a>  ),</span>
<span id="cb57-13"><a href="#cb57-13"></a>  <span class="kw">reactable</span>(data, <span class="dt">minRows =</span> <span class="dv">10</span>)</span>
<span id="cb57-14"><a href="#cb57-14"></a>)</span></code></pre></div>
<div class="container-fluid crosstalk-bscols">
<div class="fluid-row">
<div class="col-xs-3">
<div id="type" class="form-group crosstalk-input-checkboxgroup crosstalk-input">
<label class="control-label" for="type">Type</label>
<div class="crosstalk-options-group">
<div class="checkbox">
<label>
<input type="checkbox" name="type" value="Compact"/>
<span>Compact</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="type" value="Large"/>
<span>Large</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="type" value="Midsize"/>
<span>Midsize</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="type" value="Small"/>
<span>Small</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="type" value="Sporty"/>
<span>Sporty</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="type" value="Van"/>
<span>Van</span>
</label>
</div>
</div>
<script type="application/json" data-for="type">{
  "map": {
    "Compact": ["3", "12", "13"],
    "Large": ["7", "8", "10", "18", "20"],
    "Midsize": ["2", "4", "5", "6", "9", "11", "15"],
    "Small": ["1"],
    "Sporty": ["14", "19"],
    "Van": ["16", "17"]
  },
  "group": ["SharedData1182d529"]
}</script>
</div>
<div class="form-group crosstalk-input crosstalk-input-slider js-range-slider" id="price" style="width: 100%;">
<label class="control-label" for="price">Price</label>
<input data-type="double" data-min="11.4" data-max="40.1" data-from="11.4" data-to="40.1" data-step="0.5" data-grid="true" data-grid-num="9.56666666666667" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="1.74216027874564" data-drag-interval="true" data-data-type="number"/>
<script type="application/json" data-for="price">{
  "values": [11.4, 13.4, 15.1, 15.7, 15.9, 15.9, 16.3, 16.6, 18.4, 18.8, 20.8, 23.7, 26.3, 29.1, 30, 33.9, 34.7, 37.7, 38, 40.1],
  "keys": ["13", "12", "14", "6", "1", "15", "16", "17", "20", "18", "7", "8", "9", "3", "5", "2", "10", "4", "19", "11"],
  "group": ["SharedData1182d529"]
}</script>
</div>
<div id="mfr" class="form-group crosstalk-input-select crosstalk-input">
<label class="control-label" for="mfr">Manufacturer</label>
<div>
<select multiple></select>
<script type="application/json" data-for="mfr">{
  "items": {
    "value": ["Acura", "Audi", "BMW", "Buick", "Cadillac", "Chevrolet", "Chrylser"],
    "label": ["Acura", "Audi", "BMW", "Buick", "Cadillac", "Chevrolet", "Chrylser"]
  },
  "map": {
    "Acura": ["1", "2"],
    "Audi": ["3", "4"],
    "BMW": ["5"],
    "Buick": ["6", "7", "8", "9"],
    "Cadillac": ["10", "11"],
    "Chevrolet": ["12", "13", "14", "15", "16", "17", "18", "19"],
    "Chrylser": ["20"]
  },
  "group": ["SharedData1182d529"]
}</script>
</div>
</div>
</div>
<div class="col-xs-9">
<div id="htmlwidget-49" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-49">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"accessor":"Manufacturer","name":"Manufacturer","type":"factor"},{"accessor":"Model","name":"Model","type":"factor"},{"accessor":"Type","name":"Type","type":"factor"},{"accessor":"Price","name":"Price","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":10,"theme":{"color":"hsl(233, 9%, 87%)","backgroundColor":"hsl(233, 9%, 19%)","borderColor":"hsl(233, 9%, 22%)","stripedColor":"hsl(233, 12%, 22%)","highlightColor":"hsl(233, 12%, 24%)","inputStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"selectStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonHoverStyle":{"backgroundColor":"hsl(233, 9%, 25%)"},"pageButtonActiveStyle":{"backgroundColor":"hsl(233, 9%, 28%)"}},"crosstalkKey":["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],"crosstalkGroup":"SharedData1182d529","dataKey":"0fe04e63369d5bb1d8561f6b5a65b5a2","key":"0fe04e63369d5bb1d8561f6b5a65b5a2"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
</div>
</div>
</div>

    </div>
  </article>

  


</main>

      <footer class="footer">
        <ul class="footer-links">
          <li>
            <a href="/index.xml" type="application/rss+xml" target="_blank">RSS feed</a>
          </li>
          <li>
            <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备20035539号</a>
          </li>
        </ul>
      </footer>

    </div>
    



<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>



<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/r.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js"></script>
<script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>



    
<script src="/js/math-code.js"></script>
<script async src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>


    
  </body>
</html>

